react- native如何使用Echarts

npm install  native-echarts

 使用示例：

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Echarts from 'native-echarts';
import { WebView } from 'react-native-webview';

export default class EchartScreen extends React.Component {
constructor(props){
super(props);
}
render() {
const option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
return (
<Echarts option={option} height={300} />
);
}
}

但是现在会报错:

WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'. See https://github.com/react-native-webview /react-native-webview

原因是:webView 已经脱离react- native 需要单独安装react-native-webview

npm install react-native-webview

 然后打开node_modules/native-echarts/src/components/Echarts/index.js

顶部引入

  import WebView from 'react-native-webview';

这样就可以解决webView的报错

但是还有一些白屏问题,每当页面刷新就会出现闪过白屏

还是那个路径,修改代码：

import React, { Component } from 'react';
  import {  View, StyleSheet, Platform } from 'react-native';
  import WebView from 'react-native-webview'
  import renderChart from './renderChart';
  import echarts from './echarts.min';  
  export default class App extends Component {    constructor(props) {
      super(props);
    }    // 预防过渡渲染
    shouldComponentUpdate(nextProps, nextState) {
      const thisProps = this.props || {}
      nextProps = nextProps || {}
      if (Object.keys(thisProps).length !== Object.keys(nextProps).length) {
        return true
      }
      for (const key in nextProps) {
        if (JSON.stringify(thisProps[key]) != JSON.stringify(nextProps[key])) {
          // console.log('props', key, thisProps[key], nextProps[key])
          return true
        }
      }
      return false
    }    componentWillReceiveProps(nextProps) {
      if (nextProps.option !== this.props.option) {
        // 解决数据改变时页面闪烁的问题
        this.refs.chart.injectJavaScript(renderChart(nextProps))
      }
    }    render() {
      return (
        <View style={{flex: 1, height: this.props.height || 400,}}>
          <WebView
            ref="chart"
            scrollEnabled = {false}
            injectedJavaScript = {renderChart(this.props)}
            style={{
              height: this.props.height || 400,
              backgroundColor: this.props.backgroundColor || 'transparent'
            }}
            scalesPageToFit={Platform.OS !== 'ios'}
            originWhitelist={['*']}
            source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}
            onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
          />
        </View>
      );
    }
  }

补充：

无需配置开箱即用的库：

GitHub - tomLadder/react-native-echarts-wrapper: 📈Powerful React-Native ECharts Wrapper 📊

 npm i react-native-echarts-wrapper

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

export default class App extends Component {
  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line"
      }
    ]
  };

  render() {
    return (
      <View style={styles.chartContainer}>
        <ECharts
          option={this.option}
          backgroundColor="rgba(93, 169, 81, 0.3)"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1
  }
});