我在我使用Victory Native的应用中使用Expo图表库。然而,我遇到的问题是某些胜利组件会导致应用程序崩溃,例如<VictoryChart>
这对使用该库非常重要。有谁知道是否可以将victory-native
用于世博会?
我已经了解到here世博会不允许使用Victory Native可能使用的原生元素?
这就是我所做的:
exp init expo-victory-native-demo
cd expo-victory-native-demo
(来自here)npm install --save victory-native react-native-svg
npm install
react-native link react-native-svg
然后我玩了发现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>
这里是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
答案 0 :(得分:3)
通过执行以下操作解决了问题:
rm -rf node_modules/
react-native-svg
移除package.json
(请参阅here)npm install --save lodash
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"
}
}