React Navigation 从自定义标题中的按钮导航到新屏幕答案

【问题标题】：React Navigation navigate to new screen from button in custom headerReact Navigation 从自定义标题中的按钮导航到新屏幕
【发布时间】：2019-01-30 01:57:08
【问题描述】：

我正在使用React-Navigation 并创建了我的自定义标题。我用过：

navigationOptions: {
    header: <Header />
}

从路径中导入哪个<Header />。

我有一个TouchableOpacity 内部标题，我想用它来导航到另一个选项卡！我尝试使用this.props.navigation.navigate("_TabTwo")，但出现错误：

找不到变量导航

我还查看了this question，但它是关于默认标题的！重点是我的<Header /> 是一个自定义组件！

如何从标题中的按钮导航到另一个屏幕？

提前致谢！

【问题讨论】：

你能展示你的<Header />组件吗
@SGhaleb 已更新 - Tnx

标签： javascript reactjs react-native ecmascript-6 react-navigation

【解决方案1】：

像这样使用 navigationOptions 并将导航作为 prop 传递给 Header 组件

navigationOptions: ({ navigation }) => ({ 
  header: <Header navigation={navigation} />
})

Header组件不是屏幕而是navigationOptions的一部分所以它不继承navigation prop，需要手动传递

【讨论】：