胜利本地可以与世博会一起使用吗? [英] Can victory-native be used with expo?

问题描述

我正在使用

这里是 package.json:

<代码>{"main": "node_modules/expo/AppEntry.js",私人":真的，依赖关系":{"博览会": "^25.0.0",反应":16.2.0"，"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz","react-native-svg": "^6.3.1",胜利本土":^0.17.2"}}

该问题可能与

App.js 看起来是这样的:

从'react'导入React；import { StyleSheet, Text, View } from 'react-native';import { VictoryBar, VictoryChart, VictoryTheme } from "victory-native";常量数据 = [{季度:1，收益:13000}，{季度:2，收益:16500}，{季度:3，收益:14250}，{季度:4，收益:19000}];导出默认类 App 扩展 React.Component {使成为() {返回 (<视图样式={styles.container}><VictoryChart width={350} theme={VictoryTheme.material}><VictoryBar data={data} x="quarter" y="earnings"/></VictoryChart></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，alignItems: '中心',justifyContent: '中心',},});

和package.json:

<代码>{"main": "node_modules/expo/AppEntry.js",私人":真的，依赖关系":{"博览会": "^25.0.0","lodash": "^4.17.5",反应":16.2.0"，"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",胜利本土":^0.17.2"}}

I'm playing a bit around with the Victory Native chart library in an app where I'm using Expo. I'm however having the problem that some of the victory components causes the app to crash, e.g. <VictoryChart> which is quite essential to using the library. Does anyone know whether it is possible to use victory-nativewith Expo?

I've learned here that Expo doesn't allow native elements, which Victory Native maybe uses?

Here's what I have done:

1. exp init expo-victory-native-demo
2. cd expo-victory-native-demo (from here)
3. npm install --save victory-native react-native-svg
4. npm install
5. react-native link react-native-svg

Then I have played around with the demo found here, i.e. put some Victory components into App.js, but when I run exp start the app crashes right after startup if for instance <VictoryChart>is present, not a problem if I only use for instance <VictoryBar>.

There is a demo using Victory Native with Expo (see here), but I need to use this with an existing, larger project build with Expo and trying to use Victory Native outside this demo fails as mentioned above. This also uses an older version of Expo and Victory Native.

For completeness this is my App.js that crashes:

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

And it doesn't crash when <VictoryChart> is removed:

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

And here's 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"
  }
}

The issue is perhaps related to VictoryChart does not work with EXPO 23.0.0.

解决方案

Solved the issue by doing the following:

1. rm -rf node_modules/
2. removing react-native-svg from package.json (see here)
3. npm install --save lodash
4. yarn install

Then after exp start I got the following:

App.js looks thus:

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

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

这篇关于胜利本地可以与世博会一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！