react-native-router-flux 采坑总结

[wuweijia]

tabbar的嵌套 出现多个header 解决方案

关键在于hideNavBar 的使用

/**
 * tabs 下面有多个stack 每个stack 是一个tab选项每个stack下面可以有多个scene
 * 被stack包裹的scene页面 都有底部tabbar
 */
const navigator = () => (
  <Router>
      <Stack
        key="root"
        headerMode='screen'
      >
        <Tabs
          key="tabbar"        // 唯一标识
          showLabel={false}   // 显示文字
          swipeEnabled={false}// 是否可以滑动
          headerMode="screen" // 页面切换方式
          lazy                // 是否默认渲染tabbar
          tabBarPosition={'bottom'}       // tabbar在顶部还是底部，iOS默认顶部，安卓默认顶部
          activeBackgroundColor="white"   // 选中tabbar的背景色
          inactiveBackgroundColor="white" // 未选中tabbar的背景色
          activeTintColor="#4ECBFC"       // 选中tabbar图标的颜色
          inactiveTintColor="#aaa"        //
          tabBarStyle={{ backgroundColor: 'white' }}
          hideNavBar
        >
          <Stack
            key="ReportHome"
            icon={({ focused }) => reportHomeIcon(focused)}
          >
            <Scene key="ReportHome" hideNavBar={false} component={ReportHome} title="ReportHome" />
          </Stack>
          <Stack
            key="FamilyCompare"
            icon={({ focused }) => familyCompare(focused)}
          >
            <Scene key="FamilyCompare" hideNavBar={false} component={FamilyCompare} />
          </Stack>
          <Stack
            key="ProductHome"
            icon={({ focused }) => productHome(focused)}
          >
            <Scene key="ProductHome" hideNavBar={false} component={ProductHome} title="ProductHome" />
          </Stack>
          <Stack
            key="Mine"
            icon={({ focused }) => mine(focused)}
          >
            <Scene icon={({ focused }) => mine(focused)} key="Mine" hideNavBar={false} component={Mine} title="Mine" />
          </Stack>
        </Tabs>
        <Scene key="sct.sctList" component={SctList} title="SctList" />
      </Stack>
  </Router>
);

[wuweijia]

scene 返回 tabbar 遇到的问题

https://github.com/aksonov/react-native-router-flux/issues/2716