javascript - Expo React Native App 不再显示图表

Question

我一直在使用 React Native charting library对于我的托管 Expo 应用程序，在很长一段时间内都没有问题。

问题:但是，自 2 个月前(2019 年 8 月)以来，情况可能发生了变化，因为图表现在显示空白。即使对于仅包含 Text 和图表 Chart(下面链接的 repo)的简单 Expo 应用程序也是如此。

我怀疑这个问题与 React Native 的 WebView 有关。

为什么图表不再呈现，我们该如何解决这个问题？谢谢!

repo :https://github.com/nyxynyx/expo-f2chart-problem

使用:

开发系统

• 世博会 35.0.0
• react native 0.5.9
• react 16.8.3
• Mac OS X Mojave 10.14.6

目标设备

• Expo iOS 客户端 2.13.0.107059
• iOS 12.4.1 上的 iPhone 6S

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Chart from 'react-native-f2chart';

const initScript = data =>`
(function(){
    chart =  new F2.Chart({
        id: 'chart',
        pixelRatio: window.devicePixelRatio,
    });
    chart.source(${JSON.stringify(data)}, {
    value: {
    tickCount: 5,
    min: 0
    },
    date: {
    type: 'timeCat',
    range: [0, 1],
    tickCount: 3
    }
    });
    chart.tooltip({
    custom: true,
    showXTip: true,
    showYTip: true,
    snap: true,
    onChange: function(obj) {
        window.postMessage(stringify(obj))
    },
    crosshairsType: 'xy',
    crosshairsStyle: {
    lineDash: [2]
    }
    });
    chart.axis('date', {
    label: function label(text, index, total) {
    var textCfg = {};
    if (index === 0) {
        textCfg.textAlign = 'left';
    } else if (index === total - 1) {
        textCfg.textAlign = 'right';
    }
    return textCfg;
    }
    });
    chart.line().position('date*value');
    chart.render();
})();
`;

export default function App() {

  var data = [{
    date: "2017-06-05",
    value: 116
  }, {
    date: "2017-06-06",
    value: 129
  }, {
    date: "2017-06-07",
    value: 135
  }, {
    date: "2017-06-08",
    value: 86
  }, {
    date: "2017-06-09",
    value: 73
  }, {
    date: "2017-06-10",
    value: 85
  }];

  return (
    <View style={styles.container}>
      <Text>My Chart</Text>
      <View style={{ height: 350, width: '100%', backgroundColor: '#555' }}>
        <Chart initScript={initScript(data)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ddd',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

截图

深灰色区域是图表应该出现的地方，但它是空的而不是显示图表。

Answer 1

我试图用 Snack 重现这个问题，但我认为它有问题，因为它没有安装。所以我建议使用另一个模块。这些是已经过验证的模块。

1. "react-native-chart-kit"
2. 'react-native-pure-chart'
3. victory-native