react-native - 是否可以在 react-native-router-flux 中向 NavBar 添加自定义按钮？

Question

我想在查看某些页面时添加一个汉堡菜单按钮和一个出现在所有页面上的右侧按钮。这可能与 react-native-router-flux 一起使用吗？

更新:通过使用此代码，我能够轻松获得右侧按钮

<Scene key="home"
       component={HomePage}
       hideBackImage={true}
       ...
       rightButtonImage={HelpIcon}
       onRight={()=>{}}
       rightTitle={null}
       rightButtonIconStyle={{ width: 44, height: 44 }} />

事实证明，汉堡菜单按钮更加困难。有一个 抽屉图片导航栏上的属性，但没有其他有关如何使该 drawerImage 出现以及如何设置处理程序函数的文档。

我尝试以与设置左按钮相同的方式设置 rightButtonImage、onRight rightTitle 和 rightButtonIconStyle，但没有出现任何按钮。

更新 2:由于这个问题，我降级到 react-native-router-flux v3.34.0: https://github.com/aksonov/react-native-router-flux/issues/1154

并将这些 Prop 添加到我的场景中:

...
renderBackButton={()=>{ return null; }} /* Hide the back button...goofy mechanism but it works */
leftButtonImage={NavigationBurgerIcon}
onLeft={()=>{}}
leftTitle={null}
leftButtonIconStyle={{ width: 30, height: 30 }}
...

Answer 1

您可以编写自己的导航栏以实现 100% 控制。您可以从 their implementation of NavBar 构建您的 NavBar 组件并执行以下操作:

<Router 
  navBar={NavBar}
  ...
/>

react-native-router-flux api对此有更多详细信息。

完成后，您可以创建自定义属性以添加到您的场景中，以驱动各种 NavBar 行为自定义到您的项目，例如您希望如何与汉堡包图标进行交互。