图表在IOS端无法渲染

[Jie730]

• 问题描述：场景是图表一开始是隐藏的，点击显示按钮，再将图表渲染至页面上，安卓端可以正常渲染，但IOS端无法渲染，请问该如何解决？
• react-native-echarts-pro【1.9.3】
• react-native【0.61.0】
• react-native-webview【7.4.3】
• 平台【IOS】
• 系统版本【18.1】
• Demo：

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-navigation';
import { navigationBarStyle } from '../../modules/consts';
import Navigator from '../../modules/navigator';
import RNEChartsPro from 'react-native-echarts-pro';
import PluginStrings from '../../modules/i18n';

export default class InnerAutoActRec extends React.Component {
  constructor(props) {
    super(props);

    this.echartsRef = React.createRef();
  }

  state = {
    chartOpts: {
      backgroundColor: '#fff',
      color: ['#1890FF', '#DA12AA'],
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        },
        data: ['x1', 'x2', 'x3']
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        }
      },
      grid: {
        right: '5%',
        top: '15%',
        bottom: '15%'
      },
      tooltip: {
        trigger: 'axis',
        enterable: true,
        showContent: false
      },
      series: [
        {
          name: PluginStrings['change_point_angle_hori'],
          data: [1, 2, 3],
          type: 'line',
          showSymbol: false,
          smooth: true
        },
        {
          name: PluginStrings['change_point_angle_vert'],
          data: [3, 2, 1],
          type: 'line',
          showSymbol: false,
          smooth: true
        }
      ]
    },
    chartVisible: false
  };

  componentDidMount() {}

  componentWillUnmount() {}

  /**
   * @description: 设置导航栏
   */
  updateNavigationState = () => {
    this.props.navigation.setParams(navigationBarStyle);
  };

  render() {
    return (
      <View style={[Styles.container]}>
        <SafeAreaView style={{ width: '100%', flex: 0, backgroundColor: '#fff' }}>
          <Navigator navigation={this.props.navigation} />
        </SafeAreaView>
        <View style={[Styles.containerInner]}>
          <TouchableOpacity
            onPress={() => {
              this.setState({ chartVisible: !this.state.chartVisible });
            }}
          >
            <Text>切换显示</Text>
          </TouchableOpacity>

          {this.state.chartVisible && (
            <RNEChartsPro
              ref={this.echartsRef}
              option={this.state.chartOpts}
              height={300}
              eventActions={{
                showTip: e => {
                  console.log('e :>> ', e);
                }
              }}
            />
          )}
        </View>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },
  containerInner: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    padding: 10
  }
});

报错信息：

[supervons]

我的新版本环境没有复现。

尝试更新到 RN 0.61.0 支持的 最新 webview 版本看看，推荐 11.26.0 以上。

不行的话，将 Demo 中以下三个自定义的依赖移除，保证能单文件运行再提供下代码，我看能不能复现出来。

import { navigationBarStyle } from '../../modules/consts';
import Navigator from '../../modules/navigator';
import PluginStrings from '../../modules/i18n';

[Jie730]

是基于米家提供的sdk开发的，升级了依赖版本项目启动不了了

• 麻烦再复现一下试试
• DEMO:

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import RNEChartsPro from 'react-native-echarts-pro';

export default class InnerAutoActRec extends React.Component {
  constructor(props) {
    super(props);

    this.echartsRef = React.createRef();
  }

  state = {
    chartOpts: {
      backgroundColor: '#fff',
      color: ['#1890FF', '#DA12AA'],
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        },
        data: ['x1', 'x2', 'x3']
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        }
      },
      grid: {
        right: '5%',
        top: '15%',
        bottom: '15%'
      },
      tooltip: {
        trigger: 'axis',
        enterable: true,
        showContent: false
      },
      series: [
        {
          name: '测试数据1',
          data: [1, 2, 3],
          type: 'line',
          showSymbol: false,
          smooth: true
        },
        {
          name: '测试数据2',
          data: [3, 2, 1],
          type: 'line',
          showSymbol: false,
          smooth: true
        }
      ]
    },
    chartVisible: false
  };

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    return (
      <View style={[Styles.container]}>
        <View style={[Styles.containerInner]}>
          <TouchableOpacity
            onPress={() => {
              this.setState({ chartVisible: !this.state.chartVisible });
            }}
          >
            <Text>切换显示</Text>
          </TouchableOpacity>

          {this.state.chartVisible && (
            <RNEChartsPro
              ref={this.echartsRef}
              option={this.state.chartOpts}
              height={300}
              eventActions={{
                showTip: e => {
                  console.log('e :>> ', e);
                }
              }}
            />
          )}
        </View>
      </View>
    );
  }
}

const Styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    marginTop: 100
  },
  containerInner: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    padding: 10
  }
});

[sofafan]

你好，后来这个问题解决了吗？