如何将 NativeBase Header 组件与 react-native-router-flux 一起使用？答案

【问题标题】：How to use NativeBase Header component with react-native-router-flux?如何将 NativeBase Header 组件与 react-native-router-flux 一起使用？
【发布时间】：2017-05-19 04:19:48
【问题描述】：

我尝试在我使用 NativeBase 和 react-native-router 的项目中使用抽屉。一切正常，除了标题内的按钮不起作用（我无法点击这个特定按钮）。仅当我将主页包装在 <Scene key="draw"> 中时才会出现此问题，这是我的代码：

App.js

<Scene key="draw" component={SideMenu} open={false} hideNavBar={true}>
  <Scene key='main' component={Home} hideNavBar={true}/>
</Scene>

主标题

<Left>
 <Button transparent onPress={()=>Alert.alert("burger tapped")}>
  <Icon name='menu' />
 </Button>
</Left>

我的目的是当我点击按钮时，它会打开抽屉，但是当我执行上面示例的代码时，按钮根本不起作用。我怎样才能解决这个问题？

【问题讨论】：

标签： react-native drawer react-native-router-flux native-base

【解决方案1】：

常见的解决方法是将来自 nativebase 的 header 组件放入每个容器组件（屏幕）中。这种方法甚至实现到他们的boilerplate for the Ignite.

另一种方法是将自定义 NavBar 作为道具推送到场景组件。修改built-in NavBar 使用nativebase 组件而不是默认的：

import CustomNavBar from './CustomNavBar';
import Main from './Components/Main';

<Router>
  <Scene
   component={Main}
   key="main"
   type={ActionConst.RESET}
   navBar={CustomNavBar}
  />
</Router>

祝你好运！

【讨论】：

我已经尝试过了，但是 react-native-router 的 navBar 不会显示它是否被
您是否尝试过将 navBar 属性传递给 Royter 组件？
我没试过，你能给我一个示例代码我该怎么做吗？
似乎子组件没有从父组件接收到 navBar 道具，因此它不适用于嵌套场景。为每个场景明确指定 navBar。

【解决方案2】：

NativeBase 通过其NativeBase-KitchenSink 展示了这一点

这应该回答你的问题

【讨论】：