Question

嗨伙计们为Stacknavigator我制作了一个组件并把它放在导航选项的headerRight中，因为我只能在那里显示一个Icon。只是一个带有三个图标的视图。但是，当我尝试使用props.navigation.navigate函数执行onPress时，我得到一个错误，说undefined不是this.props.navigation.navigate对象。我该如何解决这个问题？

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

类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>

Answer 1

看起来您需要将navigation传递给组件。

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

onPress React导航不适用于Stacknavigator中的组件

1 个答案: