React Native victory-native可以和expo一起使用吗?

zte4gxcn  于 2023-10-22  发布在  React
关注(0)|答案(2)|浏览(141)

我在一个使用Expo的应用程序中使用了Victory Native图表库。然而,我有一些胜利组件导致应用程序崩溃的问题,例如。<VictoryChart>,这对使用库非常重要。有没有人知道victory-native是否可以与Expo一起使用?
我了解到here,世博会不允许本地元素,胜利本地可能使用?
这就是我所做的:

  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
    然后我玩了一下演示发现here,即。把一些Victory组件放入App.js,但是当我运行exp start时,如果存在<VictoryChart>,应用程序在启动后立即崩溃,如果我只使用<VictoryBar>,这不是问题。
    有一个使用Victory Native与Expo的演示(参见here),但我需要将其与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 does not work with EXPO 23.0.0有关。

qyyhg6bp

qyyhg6bp1#

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

  1. rm -rf node_modules/
    1.从package.json中删除react-native-svg(参见此处)
  2. npm install --save lodash
  3. 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"
  }
}
9q78igpj

9q78igpj2#

我在49号世博会也遇到了类似的问题。在我写这篇文章的时候,[[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)发布了。它不适用于Expo 49。我把Victory-Native降级到了36.3.1,终于可以工作了。

  • yarn add [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)
  • yarn add [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection) # I think it's optional
  • npx expo run:android --variant debug # or similar build options
import { VictoryBar, VictoryChart, VictoryTheme } from "victory-native";

export default function Index() {

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

  return (
    <View style={styles.chartContainer}>
      <VictoryChart width={350} theme={VictoryTheme.material}>
        <VictoryBar data={data} x="quarter" y="earnings" />
      </VictoryChart>
    </View>
  )
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5fcff",
  },
});

相关问题