React Navigation throw error

Question

У меня есть файл router.js, в котором определены все мои маршруты и экраны, а также SearchFilter и домашний компонент, где все собирается вместе для визуализации в одном компоненте, включая SearchFilter.когда я передаю команду onPress в один из компонентов SearchFilter для перехода на другой экран, я получаю сообщение об ошибке: «undefined не является объектом. _this.props.navigation.native -> 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'
        }
    },

}

// Home

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.Вот ссылка

Таким образом, изменения в вашем коде будут

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

Как вы можете видеть выше, я обернул его в withNavigation, внутрикомпонент, к которому вы можете получить доступ к объекту navigation, используя this.props.navigation.*.

Также вам не нужен SearchFilter в стековом навигаторе.

Надеюсь, это поможет.