我是React Native的新手。我尝试使用“ react-native-pathjs-charts”库创建饼图，但是提到method.bind is not a function时出错。
请帮助我解决这个问题。
这是我的代码：
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Animated, Easing, TouchableOpacity, Image, Linking} from 'react-native';
import { Bar } from 'react-native-pathjs-charts'
import { Pie } from 'react-native-pathjs-charts'
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {
};
export default class App extends Component<Props> {
constructor(){
super()
this.state = {
Default_Rating: 2,
Max_Rating : 5,
}
this.Star = 'https://aboutreact.com/wp-content/uploads/2018/08/star_filled.png';
this.Star_With_Border = 'https://aboutreact.com/wp-content/uploads/2018/08/star_corner.png';
this.animatedValue = new Animated.Value(0)
}
UpdateRating( key )
{
this.setState({ Default_Rating: key });
}
componentDidMount(){
this.animate()
}
animate(){
this.animatedValue.setValue(0)
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear
}
).start(() => this.animate())
}
render() {
let data = [{
"name": "Washington",
"population": 7694980
}, {
"name": "Oregon",
"population": 2584160
}, {
"name": "Minnesota",
"population": 6590667,
"color": {'r':223,'g':154,'b':20}
}, {
"name": "Alaska",
"population": 7284698
}]
let options = {
margin: {
top: 20,
left: 20,
right: 20,
bottom: 20
},
width: 350,
height: 350,
color: '#2980B9',
r: 50,
R: 150,
legendPosition: 'topLeft',
animate: {
type: 'oneByOne',
duration: 200,
fillTransition: 3
},
label: {
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}
}
let React_Native_Rating_Bar = [];
for( var i = 1; i <= this.state.Max_Rating; i++ )
{
React_Native_Rating_Bar.push(
<TouchableOpacity
activeOpacity = { 0.7 }
key = { i }
onPress = { this.UpdateRating.bind( this, i ) }>
<Image
style = { styles.StarImage }
source = { ( i <= this.state.Default_Rating ) ? { uri: this.Star } : { uri: this.Star_With_Border } } />
</TouchableOpacity>
);
}
const marginLeft = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 150]
})
return (
<View style={styles.container}>
<View>
<Text style={styles.title}>Merchant Dashboard</Text>
</View>
<View style = { styles.childView }>
{
React_Native_Rating_Bar
}
</View>
<Text style = { styles.textStyle1 }>
Rating for your shop :
{ this.state.Default_Rating } / { this.state.Max_Rating }
</Text>
<View style={styles.box}>
<Animated.Text
style={{
marginLeft,
color: 'green'}} >
Possitive Reviews!
</Animated.Text>
<Animated.Text
style={{
marginLeft,
color: 'red'
}}>
Negative Reviews!
</Animated.Text>
<View style={styles.btnStyle}>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/8/8816.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_play_circle_outline_48px-512.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
<TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}>
<Image
source={{
uri:
'https://image.flaticon.com/icons/png/512/56/56616.png',
}}
style={styles.ImageIconStyle}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.container1}>
<Pie data={data}
options={options}
accessorKey="population"
margin={{top: 20, left: 20, right: 20, bottom: 20}}
color="#2980B9"
pallete={
[
{'r':25,'g':99,'b':201},
{'r':24,'g':175,'b':35},
{'r':190,'g':31,'b':69},
{'r':100,'g':36,'b':199},
{'r':214,'g':207,'b':32},
{'r':198,'g':84,'b':45}
]
}
r={50}
R={150}
legendPosition="topLeft"
label={{
fontFamily: 'Arial',
fontSize: 8,
fontWeight: true,
color: '#ECF0F1'
}}
/>
</View>
<View>
<Text style={styles.LinkStyle} onPress={ ()=> Linking.openURL('https://google.com') } >Click Here To view Suggetions for improvement of the shop.</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
container1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
},
childView:{
justifyContent: 'center',
flexDirection: 'row',
},
StarImage:{
width: 40,
height: 40,
resizeMode: 'cover'
},
textStyle1:
{
textAlign: 'center',
color: '#000',
marginTop: 15
},
title:{
fontSize: 23,
color: '#000'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
box: {
marginTop: 10,
height:80,
width: 300,
backgroundColor: '#b2beb5',
},
btnStyle:{
justifyContent: 'center',
flexDirection: 'row',
},
btn2Style:{
alignItems: 'flex-end'
},
ImageIconStyle: {
padding: 10,
margin: 5,
height: 25,
width: 25,
resizeMode: 'stretch',
},
TextStyle: {
color: '#fff',
marginBottom: 4,
marginRight: 20,
},
SeparatorLine: {
backgroundColor: '#fff',
width: 1,
height: 40,
},
LinkStyle: {
color: '#E91E63',
textDecorationLine: 'underline'
},
});
答案 0 :(得分：1)
在我的情况下，错误是由于react-native-d3multiline-chart在将react-native版本从0.54.6升级到0.59.1之后发生的，因为内部react-native-d3multiline-chart使用的是react-native-svg 。 我通过分叉该存储库并将react-native-d3multiline-chart的package.json中的react-native-svg版本更改为9.3.3解决了该错误。 指向我的project package.json中更新的提交ID的react-native-d3multiline-chart为我解决了此错误。
答案 1 :(得分：0)
我认为您需要使用箭头功能。像这样
onPress={() => this.UpdateRating.bind(this, i)}
如果这不起作用，请共享您的错误日志以清楚地了解错误。
答案 2 :(得分：0)
我遇到了这个确切的问题（在RN升级后，0.57.8-> 0.59.1），几乎可以肯定是因为不再维护react-native-pathjs-charts库，并且指向旧版本/错误版本的react-native-svg。
虽然我还没有解决（将更新），但我怀疑更新react-native-svg并更新react-native-pathjs-charts的package.json以不明确使用v〜5.5.1会让我们朝着正确的方向前进。
更新：我能够通过手动更新模块的package.json来指向我自己的本地react-native-svg模块来修复它（临时，需要分叉图表回购）：
"dependencies": {
"lodash": "^4.12.0",
"paths-js": "^0.4.5"
},
"peerDependencies": {
"react-native-svg": "9.3.3"
},
只需确保已在项目中正确添加react-native-svg。