iOS / Android Display Problems & Solutions - Overview

[pellarboss]

Just want to post my solution there (I read chinese and english, thought I consolidate answers here for the benefit of everyone)

My versions:

• "native-echarts": "^0.5.0",
• "react": "16.8.3",
• "react-native": "0.59.5",

Fixes:

• Consolidated WKWebView fix useWebKit = { Platform.OS === 'ios' ? true : false }
• tpl.html location const source = (Platform.OS === 'ios') ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'}
• make sure you copy tpl.html from /node_modules/native-echarts/src/components/Echarts/tpl.html to android/app/src/main/assets/tpl.html
• updated toString.js to address release toString issue

Full /node_modules/native-echarts/src/components/Echarts/index.js

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

export default class App extends Component {

  constructor(props) {
    super(props);
    this.setNewOption = this.setNewOption.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      //this.refs.chart.reload();
      this.setNewOption(nextProps.option)
    }
  }

  setNewOption(option) {
    this.refs.chart.postMessage(JSON.stringify(option));
  }

  render() {
    const scaleToFit = Platform.OS === 'android'
    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}
          originWhitelist = {['*']}
          useWebKit = { Platform.OS === 'ios' ? true : false }
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={scaleToFit}
          source={source}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}

Full /node_modules/native-echarts/src/util/toString.js

export default function toString(obj) {
  return JSON.stringify(obj, function(key, val) {
    if (typeof val === 'function') {
      return `~--demo--~${val}~--demo--~`;
    }
    return val;
  }).replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
}

Reference:
#131
#142
#34
#12

[hou666]

试了一下，安卓打包没问题，thanks！

[acis]

Hi, what's tpl.html that should be copied to android/app/src/main/assets/tpl.html?

[hou666]

Hi, what's tpl.html that should be copied to android/app/src/main/assets/tpl.html?

copy tpl.html from "/node_modules/native-echarts/src/components/Echarts/tpl.html" to "android/app/src/main/assets/tpl.html".

[cshlxm]

can not render in release build~ android ,
"native-echarts": "^0.5.0",
"react": "16.8.3",
"react-native": "0.57",

[personwu0755]

您好，在ios中， 用 this.setNewOption(nextProps.option) 替换 //this.refs.chart.reload() 加载数据无反应，渴望得到你的帮助：

/node_modules/native-echarts/src/util/toString.js 如下：

export default function toString(obj) {
  return JSON.stringify(obj, function(key, val) {
    if (typeof val === 'function') {
      return `~--demo--~${val}~--demo--~`;
    }
    return val;
  }).replace('\"~--demo--~', '').replace('~--demo--~\"', '').replace(/\\n/g, '').replace(/\\\"/g,"\"");//最后一个replace将release模式中莫名生成的\"转换成"
}