undefined 不是一个对象(评估'_this.props.navigation.navigate') [英] undefined is not an object (evaluating '_this.props.navigation.navigate')
问题描述
这在 Login.js 组件中运行良好:
This was working fine within the Login.js component:
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
但是当我将它移动到一个单独的组件时,我收到了这篇文章标题中的错误.SocialFooter.js:
But when i move this to a separated component i receive the error in the title of this post. SocialFooter.js:
import React, { Component } from 'react';
import {
View,
Image,
TouchableHighlight,
Linking
} from 'react-native';
export default class SocialFooter extends Component {
static navigationOptions = { header: null }
constructor(props) {
super(props);
}
onPressSocialButton = (media) => {
if (media === 'tel') {
this.props.navigation.navigate('TelUtiles');
} else if (media === 'wa') {
Linking.openURL('whatsapp://send?text==%C2%A1Hola!%20Quiero%20realizar%20una%20consulta.&phone=5493416931539').catch(err => console.error('An error occurred', err));
} else if (media === 'fb') {
Linking.openURL('https://www.facebook.com/n/?mascotaweb');
} else if (media === 'ingrm') {
Linking.openURL('http://instagram.com/_u/mascotaweb');
}
};
render() {
return (
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<TouchableHighlight onPress={() => this.onPressSocialButton('tel')} >
<Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('wa')}>
<Image source={require('./img/icono-whatsapp.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('fb')}>
<Image source={require('./img/icono-like.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
<TouchableHighlight onPress={() => this.onPressSocialButton('ingrm')}>
<Image source={require('./img/icono-like-instagram.png')} style={{width:70, height:70,margin:10}} />
</TouchableHighlight>
</View>
)
}
}
我尝试在 onPress 方法中添加 const { navigation:navigate } = this.props;
,我也尝试在构造函数中绑定 this
,例如:<代码>this.onPressSocialButton = this.onPressSocialButton.bind(this);没有任何效果,请帮助我.谢谢!
I've tried adding const { navigation:navigate } = this.props;
within the onPress method, also i tried binding this
in the constructor, like: this.onPressSocialButton = this.onPressSocialButton.bind(this);
Nothing worked, please help me. thanks!
推荐答案
已解决:const { navigation } = this.props;
在父组件的 render()
方法 (Login.js)然后我像这样将它传递给子组件:
Solved by adding:
const { navigation } = this.props;
in the parent component's render()
method (Login.js)
then i passed it to the child component like this:
<SocialFooter navigation={navigation}/>
这篇关于undefined 不是一个对象(评估'_this.props.navigation.navigate')的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!