Question

我有一个router.js文件，其中定义了我的所有路由和屏幕，以及SearchFilter和一个Home组件，其中所有内容汇总在一个组件中，包括SearchFilter。当我将onPress prop传递给SearchFilter组件之一导航到另一个屏幕时，我收到一个错误： “undefined不是一个对象._this.props.navigation.native - ＆gt; onPress（SearchFilter）”。当我只提醒一些东西然后它起作用。请看代码。任何帮助将非常感激。感谢

// 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>
        );
    }
}

Answer 1

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

所以你的代码中的变化将是

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

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

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

希望这会有所帮助。

反应导航抛出错误

1 个答案: