React Native Router Flux如何实现导航栏透明并保留上页导航栏？

核心问题根因 #

react-native-router-flux的导航栏是路由栈下的全局共享单实例组件，默认同一时间仅在栈顶页面挂载一次。很多人踩坑的点在于，直接给当前页面设置导航栏透明样式时，会触发组件重渲染逻辑，连带卸载前序页面挂载的导航栏实例，最终出现上一页导航栏消失的异常。

正确实现步骤 #

• 路由层配置：在需要做透明效果的对应Scene节点上，按以下规则配置属性，从根源上避免触发导航栏卸载逻辑：

<Scene
  key="TargetTransparentPage"
  component={YourPageComponent}
  // 开启框架内置的透明导航模式，禁止页面切换时的导航栏位移/卸载动画
  navBarTransparent={true}
  navigationBarStyle={{
    backgroundColor: 'transparent',
    elevation: 0,
    shadowOpacity: 0
  }}
  // 关闭页面切换时的导航栏过渡动画时长，避免层级闪烁
  duration={0}
/>

• 页面内容适配：给当前页的最外层容器设置匹配导航栏高度的顶部边距，避免页面内容被悬浮的透明导航栏遮挡：
  • 安卓端取StatusBar.currentHeight + 56作为顶部边距
  • iOS端取系统状态栏高度 + 导航栏默认44px高度作为顶部边距
• 导航栏交互复用：不要在当前页内部单独引入自定义导航栏组件，导航栏的标题、返回按钮、右侧操作按钮，可通过navigation.setParams向全局共享的导航栏组件透传参数。全程保持导航栏单实例挂载，就不会被路由切换逻辑回收卸载。

常见踩坑避坑 #

• 不要直接给当前页设置hideNavBar={true}：该配置会直接从路由树中移除全局导航栏实例，导致栈内所有页面的导航栏全部消失，完全不符合预期
• 不要手动修改全局导航栏的zIndex层级：会打破RRF内部的路由层级调度逻辑，导致导航栏在页面切换时出现错位、闪烁的问题

内容的提问来源于stack exchange，提问作者Fairuz Yassar