Javascript undefined不是对象（评估'；"this.props.navigation.navigate'；"）

这在Login.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');
            }
        };

此.onPressSocialButton（'tel'）}>
此.onPressSocialButton（'wa'）}>
此.onPressSocialButton（'fb'）}>
此.onPressSocialButton（'ingrm'）}>
按社交按钮=（媒体）=>{
如果（媒体=='tel'）{
this.props.navigation.navigate（'TelUtiles'）；
}否则如果（媒体==='wa'）{
Linking.openURL（'whatsapp://send?text==%C2%A1Hola！%20Quiero%20realizar%20una%20consulta&phone=5493416931539'）.catch（err=>console.error（'发生错误'，err））；
}否则如果（媒体==='fb'）{
Linking.openURL（'https://www.facebook.com/n/?mascotaweb');                    
}否则如果（媒体=='ingrm'）{
Linking.openURL（'http://instagram.com/_u/mascotaweb');
}
};

但是当我把它移动到一个单独的组件时，我收到了这篇文章标题中的错误。 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>
        )
    }
}

import React，{Component}来自'React'；
进口{
看法
形象,，
触控高光，
连接
}从“反应本机”；
导出默认类SocialFooter扩展组件{
静态导航选项={header:null}
建造师（道具）{
超级（道具）；
}
按社交按钮=（媒体）=>{
如果（媒体=='tel'）{
this.props.navigation.navigate（'TelUtiles'）；
}否则如果（媒体==='wa'）{
Linking.openURL（'whatsapp://send?text==%C2%A1Hola！%20Quiero%20realizar%20una%20consulta&phone=5493416931539'）.catch（err=>console.error（'发生错误'，err））；
}否则如果（媒体==='fb'）{
Linking.openURL（'https://www.facebook.com/n/?mascotaweb');                    
}否则如果（媒体=='ingrm'）{
Linking.openURL（'http://instagram.com/_u/mascotaweb');
}
};
render（）{
返回(
此.onPressSocialButton（'tel'）}>
此.onPressSocialButton（'wa'）}>
此.onPressSocialButton（'fb'）}>
此.onPressSocialButton（'ingrm'）}>
)
}
}

我尝试添加

const{navigation:navigate}=this.props

在onPress方法中，我还尝试在构造函数中绑定

this

，比如：

this.onPressSocialButton=this.onPressSocialButton.bind（this）
没用，请帮帮我。谢谢
 通过添加以下内容解决：
const{navigation}=this.propsrender（）方法（Login.js）中的code>
然后我将其传递给子组件，如下所示：

<SocialFooter navigation={navigation}/>

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

的可能重复项