未定义不是对象(评估'_this.props.navigation.navigate')

时间:2018-06-27 13:41:42

标签: javascript reactjs react-native react-navigation

这在Login.js组件中工作正常:

              average distance
              between cars       
     time
      0           1.55     
      1           10.05     
      2           53.04    

但是,当我将其移动到单独的组件时,我收到该帖子标题中的错误。 SocialFooter.js:

<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');
            }
        };

我尝试在onPress方法中添加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> ) } } ,也尝试在构造函数中绑定const { navigation:navigate } = this.props;,例如:this 没有任何效果,请帮助我。谢谢!

2 个答案:

答案 0 :(得分:0)

通过添加以下内容解决: 父组件的const { navigation } = this.props;方法(Login.js)中的render() 然后我将其传递给子组件,如下所示:

<SocialFooter navigation={navigation}/>

答案 1 :(得分:0)

导航道具仅提供给您已配置的react-navigation屏幕,如果您需要在其他任何组件中使用导航道具,则需要将其作为道具传递

<SocialFooter navigation={navigation}/>