时间戳

首页 > 解决方案 > 如何修复 React Native Navigator 不起作用

react-native - 如何修复 React Native Navigator 不起作用

问题描述

我正在使用 react-native-navigator

class LinkButton extends React.Component {
    render() {
        return (
            <TouchableOpacity activeOpacity={.7} style={styles.btn} onPress={this.props.pageNavi}>
                <Image source={this.props.url}  style={styles.btnImg}/>
                <Text 
                    style={{fontSize: width(2.6)}}
                >
                    {this.props.text}
                </Text>
            </TouchableOpacity>
        );
    }
}

class Footer extends React.Component {
    render() {
        return(
            <View style={styles.container}>
                <LinkButton 
                    url={require('../../assets/img/footer/ayuda.png')} 
                    text="Ayuda"
                    pageNavi={() => this.props.navigation.navigate("Servicio") }
                />
            </View>
        );
    }

但是在pageNavi之后，我得到一个错误“未定义不是一个对象（评估'_this.props.navigation.navigate'）”在这里我想知道这是什么问题。谢谢

标签： react-native

解决方案

您需要将导航道具传递给要使用导航的所有组件。导航。

例如，在您的主屏幕中，它会呈现 Footer 组件。

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

这将使 this.props.navigation 在 Footer 组件中可用

推荐阅读