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屋！