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不是对象（正在评估 this.props.navigation.navigate）在本机反应中

请帮助。谢谢你。

Answer 1

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

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

页脚将不知道导航堆栈

Answer 2

将首页道具发送到页脚

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

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

2 个答案: