Question

我有一个ApplicationHeader组件，我想在触摸时导航到特定屏幕，但是我得到了

未定义不是对象（正在评估this.props.navigation.navigate）

App.js

render() {
  return (
    <SafeAreaView forceInset={{ bottom: 'never' }} style={styles.container}>
      {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
      <Provider store={store}>
        <ApplicationHeader navigation={this.props.navigation} />
        <AppNavigator />
      </Provider>
    </SafeAreaView>
  );
}

ApplicationHeader.js

class ApplicationHeader extends Component {
  constructor(props) {
    super(props)
  }

  openWishlist() {
    this.props.navigation.navigate('Wishlist')
  }

  render() {
    const { isLogged } = this.props;
    return (
      <View style={AppStyle.header}>
        <TouchableOpacity onPress={() => this.openWishlist()}>
          {!isLogged && (<Image source={imgWishList} style={AppStyle.headerWishlist} />)}
          {isLogged && (<Image source={imgWishListLogged} style={AppStyle.headerWishlist} />)}
        </TouchableOpacity>
      </View>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ApplicationHeader);

Answer 1

似乎您的HeaderComponent可能不在导航堆栈中。

在这种情况下，您可以尝试以下解决方案：

首先在文件中导入withNavigation，例如

import { withNavigation } from 'react-navigation';

之后，将组件导出更改为

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withNavigation(ApplicationHeader));

因此，您将可以访问此组件中的导航专家。

您的ApplicationHeader也可以移动到内部容器组件。不必一定要在App.js中使用导航道具。

希望这会对您有所帮助。

访问标题组件上的this.props.navigation

1 个答案: