native-echarts 圖形組件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    View,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import Echarts from 'native-echarts';
let {width,height} =Dimensions.get('window')
export default class EchartsTest extends Component {

    constructor(props) {
        super(props);

        this.state ={
            numDataY:["2", "53", "24", "6", "100", "20",'30'],
            othernumDataY:["10", "40", "20", "80", "120", "25",'5'],
        }
    }
    render() {
        const option= {
            //圖形位置樣式
                grid:{
                    right:15,
                    bottom:30,
                },
                title: {
                    text: '訪客數量',
                        textStyle:{
                        color:'#8e8e93',
                        fontSize:14,
                        padding:[10,0,0,10],
                    },
                    top:0,
                    left:5,
                },
                //點擊圖形某個位置的顯示彈框
                tooltip: {
                    trigger:'axis',
                },
                //統計數據的種類切換
                legend: {
                    orient:'vertical',
                    data: [{name:'訪客數量',icon: 'circle',},{name:'付款金額',icon: 'circle'}],
                    selectedMode:'multiple',
                    backgroundColor:'#fff',
                    align:'left',
                    right:20,//距離右邊界20
                    top:5,
                },
                toolbox:{
                        orient:'vertical',
                        show:true,
                        showTitle:true,
                        feature:{
                        magicType:{
                            type: 'bar',
                        },
                    },
                },
                xAxis: [
                    {
                        axisTick:{
                            show:true,
                            alignWithLabel:true,
                        },
                        data: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
                    }
                ],
                yAxis: [
                    {
                        axisTick:{
                            show:false,
                            alignWithLabel:false,
                        },
                        nameLocation:'end',
                        nameTextStyle:{
                            color:'#8e8e93',
                            fontSize:12,
                            align:'right',
                            padding:[0,0,0,10],
                            left:10,
                        },
                        interval:0,//強制分割間隔
                        nameGap:15,
                        name:'訪客數量(個)',
                        offset:-5,
                    }
                ],
                color:['#e62129','#007aff'],
                //數據配置
                series: [
                    {
                    name: '訪客數量',
                    type: 'bar',
                    data:this.state.numDataY ,
                    },
                    {
                        name: '付款金額',
                        type: 'line',
                        data:this.state.othernumDataY ,
                    }
                ]
            }
        return (
            <View style={styles.container}>
                <Echarts option={option}
                         height={200}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9',
    },
    echartstyle: {
        height: 50,
        width: 100,
    },
    button: {
        backgroundColor: '#d9534f',
        padding: 8,
        borderRadius: 4,
        marginBottom: 20
    }
});

首先這個組件在模擬器上和debug模式下是沒有任何問題但是但是在安卓打包apk運行時，顯示出問題一片空白，看源碼

 <View style={{flex: 1, height: this.props.height || 400,}}>
        <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
          }}
          source={require('./tpl.html')}
        />
      </View>

Echarts用的webView然后引入一個文件，而這個文件的路徑對於ios來說是沒有問題的，但是在安卓來說這個路徑就是錯誤的，那就在安卓里沒有這個文件,所以copy一個tpl文件,復制到如下路徑

然后在修改一下webView的source

 const source = (Platform.OS == 'ios') ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'}
    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,
          }}
          source={source}
        />
      </View>

重新編譯一下原始代碼重新運行就ok,（太特么坑爹了）,

補充一點，之后碰到上面改過之后還是顯示不了，還是空白，后來在option把function()或()=>{}及屬性:函數，就顯示不了。坑死了