レスポンシブな React Native Echarts コンポーネントの概要

この記事では、主にレスポンシブな React Native Echarts コンポーネントの導入について紹介します。これは、必要な友人に参考にしていただけるように共有します。需要の増大に伴い、MPAndroidChart のような従来のチャート ライブラリでは、プロダクト マネージャーのますます異常なニーズに対応できなくなりました。フロントエンド分野でのデータ視覚化の開発は比較的盛んですが、WebView を介してモバイル端末上で Echarts のような強力なフロントエンド データ視覚化ライブラリを使用することは、問題を解決する良い方法です。

React Native 開発では、フロントエンドと同じ JavaScript 言語が使用されるため、Echart の接続作業は比較的スムーズですが、必要なコンポーネントのカプセル化によって開発効率が大幅に向上します。

Echarts は、サードパーティのパッケージ化ライブラリ、react-native-echarts を公式に推奨しています (注: 対応する nmp パッケージ名は、native-echarts です)。現在、スターが 400 個以上、毎週 100 個以上のダウンロードがあり、まだその勢いが衰えていないことがわかります。広く使われています。しかし、調査の結果、react-native-echarts には以下の問題があることが分かりました:

ライブラリが半年以上更新されていない、Echarts のバージョンが 3.0 のままになっている、手動で追加する問題Android 側のパッケージ化のアセットは解決されていません
ライブラリのインターフェイスの柔軟性が低く、たとえば、サイズは幅と高さによってのみ設定できます。Echarts 拡張パッケージはイベント登録、WebView 通信を使用できません。 、などは実行できません
WebViewを使用してEchartsをカプセル化するため、ローカルHTMLが関与するため、純粋なJavaScriptではありません言語レベルの関数があり、ネイティブコードがないため、nmpパッケージにすることは良い選択ではありません。プロジェクトの内部コンポーネントとして記述し、自分で構成する方が、より便利で柔軟なソリューションです。

そこで、サードパーティの Echarts パッケージ化ライブラリを使用せず、ユニバーサル コンポーネントの WebChart を自分たちで作成することにしました。開発中の使用を容易にするために、このコンポーネントには次の特徴があります:

は、オプションでデータ ソースを設定するだけで、データが変更された後に自動的に更新されます。 React スタイルに沿って。

• 私たちの解決策は、コンポーネントが更新されるたびに受信オプションパラメータが変更されたかどうかを判断し、変更された場合は webView.postMessage を渡し、新しいオプションを JSON 形式で渡して Echarts に setOption を再度通知します。

  Echarts 自体がオプションを比較しますが、事前判断により、更新によって引き起こされる WebView との頻繁な通信が削減されます。これは、WebView 内で多数の非同期リクエストがある場合に明らかであり、更新では Echarts 独自の setOption が使用されます。 WebView 全体を再読み込みすることなく

WebView の postMessage インターフェイスと onMessage インターフェイスを使用すると、チャートと他の React Native コンポーネント間のイベント通信を実現できます
コンポーネントの exScript パラメータを通じて、任意のスクリプトを WebView に追加できます柔軟に使えます
自作コンポーネントなので、echartsのバージョン、拡張パック、svg/canvas、データの増分読み込みも全て自分で設定可能です
デモと使用方法

使用法と例については、react-native-echarts-demo を参照してください。直接使用する必要がある場合は、次の手順に従って移植できます:

ルート ディレクトリの WebChart コンポーネント フォルダーを適切な場所にコピーします。プロジェクトに配置します
/android/app/src/main をコピーします /assets/web フォルダーをプロジェクトと同じ場所にコピーします 手動で作成する必要があるアセット フォルダーはありません。
プロジェクトで WebChart コンポーネントを使用するには、上記の 2 つの手順のみが必要です。

さらにカスタマイズが必要な場合は、Echarts コードは上記の 2 つのフォルダーの