Question

我尝试在我的项目中使用抽屉，我在其中使用 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>

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

Answer 1

常见的解决方法是将头组件从nativebase放入每个容器组件（屏幕）。这种方法甚至实现了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>

祝你好运！

Answer 2

NativeBase使用NativeBase-KitchenSink

展示此内容

这应该回答你的问题

如何使用NativeBase Header组件与react-native-router-flux？

2 个答案: