react-native 使用 F2实现折线图

前言

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

方案介绍：

• react-native-webview
• antv/f2

大概思路：
使用webview加载本地html文件，通过injectJavaScript加载js脚本

步骤

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

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

2. 新建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();