Can victory-native be used with expo?

问题:

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.

回答1:

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