React Native: React Navigation StackNavigator not working. Getting error: "undefined is not an object (evaluating 'this.props.navigation.navigate')"

Question

我正在尝试使用 React Navigation 和 StackNavigator 在我的应用程序中导航。

我有一个带 onPress={() => navigate('DetailsScreen') 的按钮，我希望它能带我到 DetailsScreen，但我收到以下错误：

E ReactNativeJS: undefined is not an object (evaluating 'this.props.navigation.navigate')

我需要添加什么才能使其正常工作？

在这里查看我的代码： https://gist.github.com/chapeljuice/bef4b0a4dedef2994c81f3634b81aa43

Answer 1

您的组件不支持导航（它不是屏幕）。因此，这里有 2 个常见的解决方案：

使用父级

从您的父组件（如果它是一个屏幕）传递导航道具。

<Card navigation={navigation} />

这是最简单的解决方案。

使用高阶组件withNavigation

如果父组件不支持导航，或者传递 props 太复杂，您可以使用 HOC withNavigation:

export default withNavigation(connect(mapStateToProps)(Card))

然后您将可以使用 navigation 道具。