native react 折线图_react-native 使用 F2实现折线图

前言

最近工作入坑了react-native,有实现折线图的需求,使用了阿里的antv/f2可视化库。

方案介绍：

react-native-webview

antv/f2

大概思路：

使用webview加载本地html文件，通过injectJavaScript加载js脚本

步骤

新建f2chart.html,文件较大，文件地址:f2chart.html

在ios中, 将此文件与组件放在同一目录，在andirod中，手动将次文件放置在android/app/src/main/assets/f2chart.html ,如果没有该文件夹，手动创建一个。

新建f2Chart组件

import React, { PureComponent, createRef } from 'react';

import { StyleSheet, Platform } from 'react-native';

import { WebView as RNWebView } from 'react-native-webview';

import renderChart, { changeChartData } from './renderChart';

const source = Platform.select({

// eslint-disable-next-line global-require

ios: require('./f2chart.html'),

android: { uri: 'file:///android_asset/f2chart.html' },

});

export default class Chart extends PureComponent {

constructor(props) {

super(props);

this.chart = createRef();

}

// eslint-disable-next-line react/no-deprecated

componentWillReceiveProps(nextProps) {

cons