Навигация onPress React не работает для компонента внутри Stacknavigator

Привет, ребята, для Stacknavigator. Я сделал компонент и поместил его в заголовок справа от параметров навигации, потому что я могу показать там только один значок. это просто вид с тремя значками в нем. Однако, когда я пытаюсь выполнить onPress с функцией props.navigation.navigate, я получаю сообщение об ошибке, что undefined не является объектом this.props.navigation.navigate. Как я могу обойти это?

export const HomeStack = StackNavigator({ Home: { screen: Tabs, navigationOptions: { headerStyle: { backgroundColor: '#a3a5ab', }, headerRight: <Headericons /> } },

class Headericons расширяет React.Component {

constructor(props) {
    super(props);
}


Shoppingcart= () => {
    this.props.navigation.navigate('Shoppingcart');
};


render() {

    return (
        <View style={{flexDirection: 'row', marginRight: 10}}>
          <TouchableWithoutFeedback
              onPress={()=> this.Shoppingcart() } >


            <Icon
                name={'shopping-cart'}
                size={30}
                color={'#ffffff'}
                style={{marginRight: 0, paddingRight: 10, flexDirection: 'row'}}

            />
          </TouchableWithoutFeedback>

react-native react-native-ios stack-navigator react-native-android react-navigation
person Re-Angelo    schedule 23.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вам нужно передать navigation компоненту.

export const HomeStack = StackNavigator({
    Home: {
        screen: Tabs,
        navigationOptions: ({ navigation }) => ({
            headerStyle: {
                backgroundColor: '#a3a5ab',
            },
            headerRight: <Headericons navigation={navigation} />
        })
    },
})
person Rob Walker    schedule 23.01.2018
comment
Привет, спасибо за ответ. Что ты конкретно имеешь ввиду? Я пробовал делать это вот так, но все равно не работает. const navigation = this.props.navigation.navigate(); export const HomeStack = StackNavigator({ Home: { screen: Tabs, navigationOptions: { headerStyle: { backgroundColor: '#a3a5ab', }, headerRight: <Headericons navigation={navigation} /> - person Re-Angelo; 24.01.2018
comment
Отредактировали свой ответ более полным примером кода - person Rob Walker; 24.01.2018
comment
Дополнительные сведения см. В документации по адресу reactnavigation.org/docs/navigators/ - person Rob Walker; 24.01.2018
comment
Я сделал дополнительное редактирование, чтобы исправить синтаксическую ошибку, при которой я пропустил () вокруг объекта, возвращаемого функцией жирной стрелки. - person Rob Walker; 24.01.2018
comment
Хм, все равно не повезло. Могу ли я отправить вам свой код через git stash? - person Re-Angelo; 24.01.2018
comment
Я понял. Я должен был сделать это navigationOptions: ({ navigation }) => ({ headerRight: <Headericons navigation={navigation} /> }) - person Re-Angelo; 26.01.2018