我在我的反应原生项目中添加了一个图库:
https://www.npmjs.com/package/react-native-pathjs-charts
我正在使用故事书 每当我试图看到图表时,我都会收到错误消息 "找不到具有名称" RNSVGPath"
的视图的组件我尝试连接存储库,但这并没有帮助 关于如何修复它的任何想法?
这是我的故事:
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import { Bar } from 'react-native-pathjs-charts'
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
});
export default class Welcome extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Bar (Column) - Basic`,
});
styles = {
wrapper: {
flex: 1,
padding: 24,
justifyContent: 'center',
},
header: {
fontSize: 18,
marginBottom: 18,
},
content: {
fontSize: 12,
marginBottom: 10,
lineHeight: 18,
},
};
showApp(event) {
event.preventDefault();
if (this.props.showApp) this.props.showApp();
}
render() {
let data = [
[{
"v": 49,
"name": "apple"
}, {
"v": 42,
"name": "apple"
}],
[{
"v": 69,
"name": "banana"
}, {
"v": 62,
"name": "banana"
}],
[{
"v": 29,
"name": "grape"
}, {
"v": 15,
"name": "grape"
}]
]
let options = {
width: 300,
height: 300,
margin: {
top: 20,
left: 25,
bottom: 50,
right: 20
},
color: '#2980B9',
gutter: 20,
animate: {
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
axisX: {
showAxis: true,
showLines: true,
showLabels: true,
showTicks: true,
zeroAxis: false,
orient: 'bottom',
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
fill: '#34495E',
rotate: 45
}
},
axisY: {
showAxis: true,
showLines: true,
showLabels: true,
showTicks: true,
zeroAxis: false,
orient: 'left',
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
fill: '#34495E'
}
}
}
return (
<View style={this.styles.wrapper}>
<View style={styles.container}>
<Bar data={data} options={options} accessorKey='v'/>
</View>
</View>
);
}
}
Welcome.defaultProps = {
showApp: null,
};
Welcome.propTypes = {
showApp: PropTypes.func,
};
日Thnx