javascript - React Native - 导入自定义组件时出现导航错误

Question

我正在尝试在这里制作自定义组件(页脚)。这是我的代码:

Footer.js

    import React, { Component } from 'react'
    import {
        View,
        Text,
        Linking,
        StyleSheet,
        Image,
        TouchableOpacity
        Dimensions,
    } from 'react-native'

    class Footer extends Component {
        constructor(props) {
            super(props);
        }

        static navigationOptions = ({ navigation }) => ({
            title: ''
        })

        _pageAbout = () => {
            this.props.navigation.navigate('About');
        }

        render() {
            return (
                <View>
                    <View style={{ margin: 15 }}>
                        <TouchableOpacity
                           onPress={()=>this._pageAbout()}>
                           <Text>About</Text>
                        </TouchableOpacity>
                    </View>
                </View>

            );

        }
    }

    export default Footer

然后我在 Home.js 屏幕上导入并调用该组件。Home.js

import React, { Component } from 'react'
import {
    View,
    Text,
    Linking,
    StyleSheet,
    Image,
    TouchableOpacity
    Dimensions,
} from 'react-native'
class Home extends Component {
    constructor(props) {
        super(props);
    }

    static navigationOptions = ({ navigation }) => ({
        title: ''
    })

    render() {
        return (
           <Footer />        
        );
    }
}

export default Home

但是当我单击“关于”文本时，它会返回

TypeError: undefined is not an object (evaluating this.props.navigation.navigate) in react native

请帮忙。先谢谢了。

Answer 1

您需要将导航作为 Prop 传递给页脚

<Footer navigation={this.props.navigation} />   

由于页脚将不知道导航堆栈