解决过渡渲染，动态数据页面刷白闪烁，背景透明

[gelove]

// 替换源码 src/Echarts/index.js import React, { Component } from 'react'; import { WebView, View, StyleSheet } from 'react-native'; import renderChart from './renderChart'; import echarts from './echarts.min';

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])) { // 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)) } }

// webview背景透明，添加 backgroundColor: 'rgba(0,0,0,0)' 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: 'rgba(0,0,0,0)' }} source={require('./tpl.html')} /> ); } }

[gelove]

测试时完美实现股票期货k线图，打包后无效！

[leyue]

Good job, effective！！！