Приложение Expo React Native больше не отображается

Question

Я использую библиотеку графиков React Native для своего управляемого приложения Expo без проблем в течение достаточно долгого времени.

Проблема: Однако что-то могло измениться с 2 месяца назад (август 2019 г.), поскольку на графике теперь отображается пустое место. Это справедливо даже для простого приложения Expo, содержащего только Text и диаграмму Chart (репо приведено ниже).

Я подозреваю, что эта проблема связана с WebView React Native.

ПочемуДиаграмма больше не отображается, и как мы можем решить эту проблему? Спасибо!

Репо : https://github.com/nyxynyx/expo-f2chart-problem

Использование:

Система разработки

• expo 35.0.0
• реагирует на родной 0.5.9
• реагирует на 16,8.3
• Mac OS X Mojave 10.14.6

Целевое устройство

• Клиент Expo iOS 2.13.0.107059
• iPhone 6S на iOS 12.4.1

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',
  },
});

Снимок экрана

Темная серая область находится там, где должна быть Chart, но вместо отображения диаграммы она пуста.

Answer 1

Я пытался воссоздать эту проблему с Snack, но я думаю, что-то не так с ним, потому что он не устанавливается. Поэтому я бы порекомендовал использовать другой модуль. Это уже утвержденные модули.

1. "реактив-родной-чарт-комплект"
2. 'реакция-родной-чистый-диаграмма'
3. победоносец