ios手机系统版本12.0 echarts图表第一次加载不出来，一片空白，点击一下才显示出来。

[nfq6612]

"native-echarts": "^0.4.0", "react": "^16.3.2", "react-native": "^0.53.0", ios手机系统版本12.0 echarts图表第一次加载不出来，一片空白，点击一下才显示出来。

[LabanL]

引入库react-native-wkwebview-reborn, 然后在本项目的react-native-echarts/src/components/Echarts/index.js 中为iOS平台新增一个WKWebView的返回即可解决. 注意WKWebView仅是iOS的组件, 所以要注意兼容iOS和Android.

[yuezonglun]

@LabanL android的有没有兼容方法？

[LabanL]

@yuezonglun Android的原来的方式就能用. 引入库之后改一下本项目的react-native-echarts/src/components/Echarts/index.js 文件中的render()方法, 判断下平台, iOS用WKWebView, Android就用原来的.

render() {
    return (
      <View style={{flex: 1, height: this.props.height || 400,}}>
      {Platform.OS === 'ios' ? <WKWebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS !== 'ios'}
          source={require('./tpl.html')}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        /> : <WebView
          ref="chart"
          scrollEnabled = {false}
          injectedJavaScript = {renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS !== 'ios'}
          source={require('./tpl.html')}
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        /> }
      </View>
    );
  }

[TangBX]

@LabanL 我使用这个方法 图表比预期小了好多 而且样式也有一些偏差 比如饼图的label不在中间 往左偏了

[bashen1]

外面的View加入overflow :'hidden'

[WowJesse]

mark

[arlovip]

@LabanL 我使用这个方法 图表比预期小了好多 而且样式也有一些偏差 比如饼图的label不在中间 往左偏了

请问下，你用的饼图的label的文本可以设置背景颜色吗？或者设置图片背景？ 我这边试了好多方法，在手机上没法显示