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

Question

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

应用.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>

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

Answer 1

常见的解决方法是将 nativebase 中的标头组件放入每个容器组件(屏幕(中。这种方法甚至实施到他们的 Ignite 样板中。

另一种方法是将自定义导航栏作为道具推送到场景组件。修改内置导航栏以使用本机基本组件而不是默认组件：

import CustomNavBar from './CustomNavBar';
import Main from './Components/Main';
<Router>
  <Scene
   component={Main}
   key="main"
   type={ActionConst.RESET}
   navBar={CustomNavBar}
  />
</Router>

祝你好运！

Answer 2

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

。

这应该回答你的问题