胜利土生土长能和世博会一起使用吗？

Question

在一个应用程序中，我正在使用胜利本土化图表库，我正在使用世博会。然而，我遇到的问题是，一些胜利组件会导致应用程序崩溃，例如<VictoryChart>，这对于使用库非常重要。有人知道世博会是否可以使用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

然后我玩了一下这里的演示，也就是把一些胜利的组件放进App.js，但是当我运行exp start时，应用程序会在启动后立即崩溃，例如，如果有<VictoryChart>，如果我只使用<VictoryBar>，就不会有问题。

有一个演示使用胜利本机与世博(请参阅这里)，但我需要使用这与现有的，更大的项目构建与博览，并试图使用胜利本土在此演示失败，如上文所述。这也使用了一个老版本的世博会和胜利土著。

为了完整起见，这是我的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不适用于世博会23.0.0有关。

Answer 1

解决这一问题的办法如下：

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"
  }
}