ホームページ >ウェブフロントエンド >jsチュートリアル >レスポンシブな React Native Echarts コンポーネントの概要
レスポンシブな React Native Echarts コンポーネントの概要
- 不言オリジナル
- 2018-07-14 11:17:562131ブラウズ
この記事では、主にレスポンシブな 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 つのフォルダーの タグにあります。現在、拡張パックなしの 4.0 フル バージョンをダウンロードできます。公式 Web サイトのバージョンと拡張パッケージの置き換え、svg/canvas、増分データの読み込みなどは WebChart/index.js で直接変更できます。モバイル側では、パフォーマンス上の理由から、通常は svg レンダリング モードを使用します。
WebChartの具体的な使い方については、App.jsを参照してください。スタイル設定は通常のReact Nativeコンポーネントと同じです。flexを使用することも、固定値に設定することもできます。 3 つの追加パラメーター:
- option(object): setOption に割り当てられたパラメーター オブジェクト。変更後、WebChart は応答性の高い更新を実現するために内部で setOption を自動的に呼び出します。 JSON の解析中に関数が処理されないことに特に注意してください。そのため、関数フォーマッタやクラスベースの LinearGradient の使用を避ける必要があります。デモ
- exScript(string) のような通常のオブジェクトを使用してください。 WebView のロード時に実行されるコードは、通常、テンプレート リテラルを使用することをお勧めします
- onMessage(function): WebView は、postMessage の後に最初にグラフ通信にコールバックを設定する必要があります。他の React Native コンポーネントとの併用
- もちろん、これらはビジネス ニーズに基づいて設計されたパラメータであり、完全に自由にリセットできます。
Echarts と React Native コンポーネント間の通信
React Native の WebView コンポーネントでは、HTML とコンポーネント間の双方向通信のために onMessage と postMessage が提供されています。具体的な使用方法についてはドキュメントを参照してください。
webView.postMessage を使用して、WebChart は Echarts に setOption を実行するように通知します。exScript では、window.postMessage を使用して Echarts イベントを React Native コンポーネントに伝達できます。
一般に、通信データが次の形式のオブジェクトであることに同意します:
{
type: 'someType',
payload: {
value: 111,
},
}
onMessage と postMessage は文字列のみを転送できるため、exScript では次のような JSON シリアル化が必要です:
exScript={`
chart.on('click', (params) => {
if(params.componentType === 'series') {
window.postMessage(JSON.stringify({
type: 'select',
payload: {
index: params.dataIndex,
},
}));
}
});
`}
上記は、カプセル化された応答 WebChart です。コンポーネントと使用法、完全なコードについては、react-native-echarts-demo を参照してください。
使用中には、まだいくつかの未解決の落とし穴があり、現時点では回避することしかできません。知っている学生は私を修正することを歓迎します:
IOS では、Echarts は透明効果と色をレンダリングできないようです。 rgbaでの設定は通常できません
React NativeのWebViewには無効なstyle.height属性があるようなので、Viewの外側に設定する必要があります
現在のリソースロード方法によれば、indexのコピーが2つ存在します。 Androidではhtml。プラットフォームは実行時に判断されるため、index.anroid.jsとindex.ios.jsを別々に設定してもパッケージ化されるため、アセットは手動で追加する必要があります
index.htmlにインライン化する必要があります。 Echarts のコード、別の js ファイルへの外部参照は無効のようです
以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHPの中国語サイトです！
関連する推奨事項:
以上がレスポンシブな React Native Echarts コンポーネントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。