反应导航抛出错误答案

【问题标题】：React Navigation throw error反应导航抛出错误
【发布时间】：2018-11-01 20:59:52
【问题描述】：

我有一个 router.js 文件，其中定义了我的所有路由和屏幕，还有 SearchFilter 和一个 Home 组件，所有内容都聚集在一个组件中呈现，包括 SearchFilter。当我将 onPress 道具传递给 SearchFilter 组件之一以导航到另一个屏幕时，出现错误： “未定义不是对象。_this.props.navigation.native -> onPress(SearchFilter)”。当我只提醒某些东西时，它就会起作用。请看代码。任何帮助将非常感激。谢谢

//搜索过滤器

class SearchFilter extends React.Component{

    render(){
        return (
            <View style={styles.main}>
                <View style={styles.wrapper}>

                    <TouchableOpacity style={styles.buttonShape} 

                     onPress={ // Here lies the error*************

                       () => this.props.navigation.navigate('Details')}

                     >

                        <Text style={styles.text}>Super-Market</Text>
                        <Image source={require('./icons/supermarket.png')} />
                    </TouchableOpacity>

                </View>
            </View>
        );
    }
}

// 路由器

export const ScreenSwitch = StackNavigator({
    Home:{
        screen: Home,
        navigationOptions:{
            title: 'Home'
        }
    },
    SearchFilter: {
        screen: SearchFilter,
        navigationOptions: {
            title: 'SearchFilter'
        }
    },
    Details: {
        screen: MemberDetails,
        navigationOptions: {
            title: 'MemberDetails'
        }
    },

}

//首页

class Home extends React.Component {

    render() {
        return(
            <View style = {styles.main}>
                <Header/>
                <SearchFilter/>

                <ScrollView contentContainerStyle = {styles.scroll}>
                    <Card />
                </ScrollView>

            </View>
        );
    }
}

【问题讨论】：

为什么SearchFilter 成为导航器的一部分，您要从其他屏幕导航到SearchFilter 吗？我可以看到您在Home 组件中使用了SearchFilter 作为组件。
我想将 SeachFilter 作为主屏幕上的一个按钮，它应该导航到详细信息。

标签： react-native react-navigation

【解决方案1】：

我相信SearchFilter 不是navigator 的一部分，而是它的一个组件，但您想在此组件中使用navigation 对象。 react-navigation 提供 withNavigation 函数来包装您的 HOC 组件。这是link

所以你代码中的变化将是

class SearchFilter extends React.Component {
  ...
}
export default withNavigation(SearchFilter);

正如您在上面看到的，我已经将它包装到withNavigation 中，在组件内部您可以使用this.props.navigation.* 访问navigation 对象。

此外，您不需要在堆栈导航器中使用 SearchFilter。

希望这会有所帮助。

【讨论】：