Question

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

2018-01-23

1090

react-native react-navigation react-native-ios stack-navigator

大家好，对于 Stacknavigator，我创建了一个组件并将其放置在导航选项的 headerRight 中，因为我只能在那里显示一个图标。只是一个包含三个图标的视图。但是，当我尝试使用 props.navigation.navigate 函数执行 onPress 时，我收到一条错误消息，提示 undefined 不是对象 this.props.navigation.navigate。我该如何解决这个问题？

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

class Headericons extends 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} />
        })
    },
})