模拟器正常显示 打包成apk手机上不显示

[lixiaobin0303]

安卓模拟器上可以正常显示 而且第一次显示需要很长时间的加载 但是打包成apk在手机上不显示任何东西

[Null-Ouwenjie]

https://github.com/somonus/react-native-echarts/issues/32

[thiswhy]

我也是，什么鬼，你怎么解决的？是不是换了其他的第三方库了？

[fox19920726]

我也是，怎么解决的

[thiswhy]

这个问题在github上已经解决了，我给你发一下具体操作流程 首先 node_modules\native-echarts\src\components\Echarts 找到这个文件路径，然后找到路径下面的这个文件，tpl.html 拷贝这个文件到android的assets这个目录下,没有这个目录就新建一个。 然后更改Echarts目录下的index文件中的source <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')} source={{uri: 'file:///android_asset/tpl.html'}} />

。这样打签名包就可以显示了。

还有个问题，解决图表刷新闪屏问题。也是上面这个index文件。代码给你发一下，原原本本拷贝替换就可以。

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 (

        <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')}
            source={{uri: 'file:///android_asset/tpl.html'}}
        />

    );
}

}

[ashutoshtrack]

@thiswhy where to locate directory of assets in android.
i tried building an release apk before i came across this issue of blanking out of screen.

[thiswhy]

if there have no assets directory, build one under android/java/ res, the tpl. html I had show you

[arlovip]

这个问题在github上已经解决了，我给你发一下具体操作流程 首先 node_modules\native-echarts\src\components\Echarts 找到这个文件路径，然后找到路径下面的这个文件，tpl.html 拷贝这个文件到android的assets这个目录下,没有这个目录就新建一个。 然后更改Echarts目录下的index文件中的source <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')} source={{uri: 'file:///android_asset/tpl.html'}} />

。这样打签名包就可以显示了。

还有个问题，解决图表刷新闪屏问题。也是上面这个index文件。代码给你发一下，原原本本拷贝替换就可以。

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 (

        <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')}
            source={{uri: 'file:///android_asset/tpl.html'}}
        />

    );
}

}

@thiswhy 以上这种避免白屏和过渡渲染的代码是有bug的，如果你切换数据次数太多，我这边测试是超过18次， 然后echarts图表 直接不显示了！！！

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

    componentWillReceiveProps(nextProps) {
        if (nextProps.option !== this.props.option) {
            this.refs.chart.injectJavaScript(renderChart(nextProps))
        }
    }

[wangliguang]

https://blog.csdn.net/gg_ios/article/details/101063054 除了上诉方案，还有其他三种方案解决，而且改动更小