この記事では、主にレスポンシブな React Native Echarts コンポーネントの導入について紹介します。これは、必要な友人に参考にしていただけるように共有します。需要の増大に伴い、MPAndroidChart のような従来のチャート ライブラリでは、プロダクト マネージャーのますます異常なニーズに対応できなくなりました。フロントエンド分野でのデータ視覚化の開発は比較的盛んですが、WebView を介してモバイル端末上で Echarts のような強力なフロントエンド データ視覚化ライブラリを使用することは、問題を解決する良い方法です。
React Native 開発では、フロントエンドと同じ JavaScript 言語が使用されるため、Echart の接続作業は比較的スムーズですが、必要なコンポーネントのカプセル化によって開発効率が大幅に向上します。
Echarts は、サードパーティのパッケージ化ライブラリ、react-native-echarts を公式に推奨しています (注: 対応する nmp パッケージ名は、native-echarts です)。現在、スターが 400 個以上、毎週 100 個以上のダウンロードがあり、まだその勢いが衰えていないことがわかります。広く使われています。しかし、調査の結果、react-native-echarts には以下の問題があることが分かりました:
そこで、サードパーティの Echarts パッケージ化ライブラリを使用せず、ユニバーサル コンポーネントの WebChart を自分たちで作成することにしました。開発中の使用を容易にするために、このコンポーネントには次の特徴があります:
私たちの解決策は、コンポーネントが更新されるたびに受信オプションパラメータが変更されたかどうかを判断し、変更された場合は webView.postMessage を渡し、新しいオプションを JSON 形式で渡して Echarts に setOption を再度通知します。
Echarts 自体がオプションを比較しますが、事前判断により、更新によって引き起こされる WebView との頻繁な通信が削減されます。これは、WebView 内で多数の非同期リクエストがある場合に明らかであり、更新では Echarts 独自の setOption が使用されます。 WebView 全体を再読み込みすることなく
さらにカスタマイズが必要な場合は、Echarts コードは上記の 2 つのフォルダーの タグにあります。現在、拡張パックなしの 4.0 フル バージョンをダウンロードできます。公式 Web サイトのバージョンと拡張パッケージの置き換え、svg/canvas、増分データの読み込みなどは WebChart/index.js で直接変更できます。モバイル側では、パフォーマンス上の理由から、通常は svg レンダリング モードを使用します。
WebChartの具体的な使い方については、App.jsを参照してください。スタイル設定は通常のReact Nativeコンポーネントと同じです。flexを使用することも、固定値に設定することもできます。 3 つの追加パラメーター:
Echarts と React Native コンポーネント間の通信
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
