Plotly.js in einer React Native Webview

Blog

Plotly.js in einer React Native Webview

Plotly.js in einer React Native Webview

reagieren-native-plotly Verwenden plotly.js in Reagieren Sie nativ! (plotly.js v1.50.1)

Installation

$ npm install react-native-plotly

Wie

Unter der Haube, |_+_| ist nur eine Webansicht mit |_+_| hineingespritzt. Die |_+_| Der Code wird auf dem Gerät gespeichert, sodass er offline funktioniert. |_+_| bietet auch Methoden zum Aufrufen der Webansicht mit Aktualisierungen der Diagrammdaten und des Layouts.

Einschränkungen

  • Die |_+_| Code wird mit |_+_| in die Webansicht geladen. Dies führt zu einer gewissen Latenz zwischen dem anfänglichen Rendern der Komponente und dem ersten Anzeigen des Diagramms (normalerweise 1-3 Sekunden).

Kompatibilität

Die neueste Version dieser Bibliothek hängt von React-native-webview ab (getestet mit v7.4.3). v1.0.0 dieser Bibliothek und darunter verwendete die Webansicht von React-native.

Kernel-Panik beenden Ubuntu wird nicht synchronisiert

Verwendungszweck

react-native-plotly

Requisiten

Schlüssel Wert Bezeichnung
Daten plotly.js-Daten[] (erforderlich) Kartendaten
Layout plotly.js-Layout Diagrammlayout
konfigurieren? plotly.js-Konfiguration Diagrammkonfiguration
Stil? Stil Auf die WebView anzuwendender Stil (Standard ist { flex: 1 })
onLoad? fn() Wird aufgerufen, wenn der Plot zum ersten Mal geladen wird
enableFullPlotly? boolesch Wenn Sie dies auf true setzen, wird das vollständige Plotly-Bundle anstelle des Basispakets geladen. Kann Probleme und langsamere Ladezeiten verursachen, insbesondere bei Versionen von RN<60
debuggen? boolesch Falls wahr, werden Fehler in der Webansicht im Diagramm angezeigt
aktualisieren? fn() nachstehend beschrieben

Standardmäßig wird das Diagramm jedes Mal, wenn sich die Requisiten der Plotly-Komponente ändern, mit aktualisiert Plotly.reagieren . Wenn Sie dieses Verhalten überschreiben möchten, können Sie eine Funktion als |_+_| . übergeben prop und rufen Sie die Plotly-Update-Funktionen manuell auf. Die |_+_| Funktionssignatur ist:

plotly.js

|_+_| ist der aktuelle |_+_|, |_+_| und |_+_| Requisiten

Reaktions-Bootstrap-Gitter

|_+_| ist die kommende |_+_|, |_+_| und |_+_| Requisiten

|_+_| ist ein Objekt mit drei Eigenschaften: |_+_|, |_+_| und |_+_|. Sie können diese Funktionen aufrufen, um das Diagramm zu aktualisieren. Details zu den Funktionen dieser Funktionen finden Sie Hier

Download-Details:

Autor: Rynobax

Live-Demo: https://snack.expo.io/@rynobax/react-native-plotly-demo

GitHub: https://github.com/rynobax/react-native-plotly

Morsecode-Binärbaum

#react-native #programmierung #reactjs