如何使<Navigator> 的navigationBar 位于顶部？

Question

我希望我的 NavigationBar 能够在场景转换中持续存在，因此我使用了 <Navigator> 的 navigationBar 道具。 (Official Navigator doc)

当我将<ToolbarAndroid> 传递给<Navigator> 的navigationBar 道具时，<ToolbarAndroid> 将位于屏幕底部（在renderScene 下方）

<Navigator
      initialRoute={ routes[0] }
      renderScene={ this._routeMapper.bind(this) }
      configureScene={ () => Navigator.SceneConfigs.FadeAndroid }
      navigationBar={(
        <ToolbarAndroid
          title={"Nav Bar"}
          titleColor="#ffffff"
          navIcon={require('../img/ic_menu_white_48dp.png')}
          onIconClicked={ this.props.onIconClicked }
          style={styles.toolbar}
        />
      )}

我猜那是因为<Navigator> 在 renderScene 之后渲染了 navigationBar。

虽然我可以将 ToolbarAndroid 的 position 设置为 absolute 和 top: 0，但 renderScene 会被 Toolbar 覆盖，因此并不理想。

有没有办法解决这个问题？

或者是否有任何其他推荐的方式来实现将在场景转换中持续存在的 NavigatorBar？

谢谢！

Answer 1

您可以在<View>封闭标签内的renderScene函数中使用导航栏

供您参考，请查看此链接react native movies app

看看#48 到#62 的行号，你就会有一个清晰的想法。

传递一个路径引用变量，如 id,name 来识别您要渲染的屏幕，然后添加您的导航工具栏。