Wie kann ich eine Javascript-Bibliothek wie moment.js verwenden, um native zu reagieren?

75

Was ist die empfohlene Methode, um native Javascript-Bibliotheken in React Native zu verwenden? Gibt es spezielle Einschränkungen?

react-native Nomnombunty
quelle

Antworten:

109

Kinderleicht! Führen Sie im Stammverzeichnis Ihres Projekts einfach Folgendes aus:

npm install moment --save

Dann können Sie es in Ihren Code importieren:

import moment from 'moment';
var now = moment().format();

Die Einschränkungen wären alles, was versucht, den Browser zu "erreichen" (was in diesem Zusammenhang nicht existiert). Deshalb gibt es Polyfills für Dinge wie XHR.

Die offizielle Dokumentation enthält Beispiele zur Verwendung der Moment-Bibliothek

Colin Ramsay
quelle
3
Es sieht nicht so aus, als würde das tatsächlich funktionieren. Das gleiche gilt für lodash. Einige Dinge funktionieren, wie das Flussmittelpaket, andere nicht.
Jacob
1
Ich habe es mit Moment versucht und es funktioniert definitiv. Was scheint das spezifische Problem zu sein?
Colin Ramsay
1
Haben Sie andere ausprobiert, wie Lodash? Es funktioniert auch nicht für mich. Das exportierte Modul von require('lodash')ist ein leeres Objekt. Ich habe auch 'lodash-node' ausprobiert.
Jacob
Es sieht so aus, als würden andere dasselbe berichten: github.com/facebook/react-native/issues/406
Jacob
Nur meine 2 Cent für das Loadash-Problem, und ich bin ein Noob, also nimm mein Wort nicht dafür, aber in React Native benötigen einige Bibliotheken OS-abhängigen Code, dh in xcode oder android. Ich weiß noch nicht genug darüber, um weitere Kommentare abzugeben. Ein anderer Gedanke ist, dass Importanweisungen unabhängig von package.json standardmäßig im Ordner node_modules angezeigt werden. Es ist auch möglich, dass Ihre Importanweisung falsch ist. Sie können auch Varianten ausprobieren: {func} aus 'lib' importieren oder * aus 'lib' importieren
John
10

Einige der momentanen Methoden funktionieren in React Native, andere nicht. Ich vermute, es hat mit Zuhörern zu tun.

Ich kann Moment zum Formatieren verwenden:

moment(new Date()).format("YYYY-MM-DD hh:mm:ss")

Aber nicht für die aktive Formatierung:

moment(new Date()).format("YYYY-MM-DD hh:mm:ss").fromNow()
Reuven Etzion
quelle
5

Um eine npm-Bibliothek zu verwenden, verwenden Sie einfach diesen Befehl mit dem jeweiligen Bibliotheksnamen 

npm install moment --save

zB) npm installiere {deinen Bibliotheksnamen hier} --save

dann einfach in deine Klasse importieren und verwenden

import moment from 'moment';
Sachin
quelle
5

Wenn Sie moment.js speziell für "Reagieren" oder "Reagieren" verwenden möchten react-moment, sehen Sie sich unter https://github.com/headzoo/react-moment eine Reaktionskomponente für die Momentbibliothek an .

Führen Sie Folgendes aus, um React-Moment in React Native zu verwenden:

npm install --save moment react-moment

Dann in der Datei möchten Sie Moment verwenden:

import Moment from 'react-moment';

Verwenden Sie es schließlich wie gewünscht, zum Beispiel:

<Moment element={Text} fromNow>
    { post.datePublished }
</Moment>

Die Requisite element={Text}ist speziell für reaktive native. Es stellt sicher, dass die resultierende Zeichenfolge in einer TextKomponente gerendert wird . Ohne dies würde eine native Reaktion einen Fehler auslösen.

Ben
quelle
1
element={Text}Dieses Ding hat meinen Fehler behoben. Danke !!
Neha
2

Es sieht so aus, als ob einige npm-Module derzeit nicht mit dem Packager kompatibel sind . Ich habe mich noch nicht wirklich mit dem Warum befasst, aber ich habe darauf zurückgegriffen, einen Anbieterordner zu haben und über die Webversion zu kopieren, aber ganz oben, speziell zu setzen

/** * @providesModule moment */

Und unten ändern Sie es bis zu:

module.exports = moment;

Ich bin mir noch nicht sicher, ob dies der richtige Weg ist, aber die Verpackung ist für alle noch ziemlich neu.

Jakob
quelle