React Native：React Navigation StackNavigator 不工作。出现错误：“未定义不是对象（评估'this.props.navigation.navigate'）”

Question

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

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

E ReactNativeJS: undefined is not an object (evalating '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 属性。