React Native 集成native-echarts(图表插件)及代码示例

React Native 集成native-echarts(图表插件)及代码示例

1、安装

• 官方链接:https://www.npmjs.com/package/native-echarts

npm install --save native-echarts

2、解决Android环境中图表不显示问题

#拷贝tpl.html
复制node_modules\native-echarts\src\components\Echarts\tpl.html文件、到android/app/src/main/assets文件夹下。

#修改native-echarts入口文件
修改node_modules/native-echarts/src/components/Echarts/index.js文件

#修改内容
const iosPlatform = Platform.OS === 'ios' ? 'true' : 'false';
source={iosPlatform === 'true' ? require('./tpl.html') : {uri: 'file:///android_asset/tpl.html'}}

3、解决页面过度渲染闪烁问题

1):替换node_modules\native-echarts\src\components\Echarts目录下、index.js和renderChart.js文件，内容如下:

2):index.js

import React, {
   Component} from 'react';
import {
   WebView, View, StyleSheet, Platform} from 'react-native';
import renderChart from './renderChart';
import renderChartNoFirst from './renderChart'
import echarts from './echarts.min';


const iosPlatform = Platform.OS === 'ios' ? 'true' : 'false';
export default class App extends Component {
   

    // 预防过渡渲染
    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])) {
   
                return true
            }
        }