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

Question

大家好，Stacknavigator 我制作了一个组件并将其放在导航选项的 headerRight 中，因为我只能在那里显示一个图标。 只是一个包含三个图标的视图。但是，当我尝试使用 props.navigation.navigate 函数执行 onPress 时，我收到一条错误消息，提示未定义不是对象 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} />
        })
    },
})