0

我正在使用Expo的应用程序中使用Victory Native图表库。然而，我遇到了一些胜利组件导致应用程序崩溃的问题，例如，这对于使用库非常重要。有谁知道是否可以与 Expo 一起使用？<VictoryChart>victory-native

我在这里了解到 Expo 不允许使用 Victory Native 可能使用的原生元素？

这是我所做的：

  1. exp init expo-victory-native-demo
  2. cd expo-victory-native-demo（从这里）
  3. npm install --save victory-native react-native-svg
  4. npm install
  5. react-native link react-native-svg

然后我玩了在这里找到的演示，即将一些 Victory 组件放入 App.js，但是当我运行exp start应用程序时，如果存在实例，则在启动后立即崩溃<VictoryChart>，如果我只使用实例，则不是问题<VictoryBar>。

有一个将 Victory Native 与 Expo 结合使用的演示（请参见此处），但我需要将其与使用 Expo 的现有较大项目构建一起使用，并且尝试在此演示之外使用 Victory Native 失败，如上所述。这也使用旧版本的 Expo 和 Victory Native。

为了完整起见，这是我崩溃的 App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryTheme } from "victory-native";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <VictoryChart width={350} theme={VictoryTheme.material}>
          <VictoryBar data={data} x="quarter" y="earnings" />
        </VictoryChart>
      </View>
    );
  }
}

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

<VictoryChart>并且它在被移除时不会崩溃：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryTheme } from "victory-native";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <VictoryBar data={data} x="quarter" y="earnings" />
      </View>
    );
  }
}

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

在此处输入图像描述

这是package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-svg": "^6.3.1",
    "victory-native": "^0.17.2"
  }
}

该问题可能与VictoryChart 不适用于 EXPO 23.0.0 有关。

4

1 回答 1

5

通过执行以下操作解决了该问题：

  1. rm -rf node_modules/
  2. 删除react-native-svg（package.json见这里）
  3. npm install --save lodash
  4. yarn install

然后在exp start我得到以下信息后：

在此处输入图像描述

App.js看起来是这样的：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryTheme } from "victory-native";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 }
];

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <VictoryChart width={350} theme={VictoryTheme.material}>
          <VictoryBar data={data} x="quarter" y="earnings" />
        </VictoryChart>
      </View>
    );
  }
}

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

并且package.json：

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^25.0.0",
    "lodash": "^4.17.5",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "victory-native": "^0.17.2"
  }
}
于 2018-03-24T18:48:27.200 回答