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

本文链接：https://blog.csdn.net/weixin_44187730/article/details/86489233

本文介绍了如何在React Native应用中集成native-echarts图表插件，包括安装过程、解决Android环境下的图表不显示问题、避免页面渲染闪烁的解决方案，以及通过EchartsExample.js展示的不同类型的图表视图（基本视图、单一视图、数据视图、折线视图、层叠视图）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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
            }
        }
        return