胜利本土可以用于世博会吗?

时间:2018-03-24 18:01:13

标签: react-native victory-charts

我在我使用Victory Native的应用中使用Expo图表库。然而,我遇到的问题是某些胜利组件会导致应用程序崩溃,例如<VictoryChart>这对使用该库非常重要。有谁知道是否可以将victory-native用于世博会?

我已经了解到here世博会不允许使用Victory Native可能使用的原生元素?

这就是我所做的:

  1. exp init expo-victory-native-demo
  2. cd expo-victory-native-demo(来自here
  3. npm install --save victory-native react-native-svg
  4. npm install
  5. react-native link react-native-svg
  6. 然后我玩了发现here的演示,即将一些Victory组件放入App.js,但是当我运行exp start时,应用程序在启动后立即崩溃,例如{{1}如果我只使用例如<VictoryChart>

    ,则存在,不是问题

    有一个使用Victory Native with Expo的演示(参见here),但是我需要使用现有的更大的项目构建与Expo,并试图在此演示之外使用Victory Native失败,如上所述。这也使用旧版本的Expo和Victory Native。

    为了完整性,这是我崩溃的App.js:

    <VictoryBar>

    删除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>

    enter image description here

    这里是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

    问题可能与VictoryChart does not work with EXPO 23.0.0有关。

1 个答案:

答案 0 :(得分:3)

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

  1. rm -rf node_modules/
  2. react-native-svg移除package.json(请参阅here
  3. npm install --save lodash
  4. yarn install
  5. 然后在exp start之后我得到了以下内容:

    enter image description here

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