React Navigation5.0系列四：Nesting navigators(嵌套导航)

此文章为ReactNavigation导航库5.0版本的第4篇，前几篇系列文章如下：
React Navigation5.0系列一：StackNavigator的使用
React Navigation5.0系列二：TabNavigation的使用
React Navigation5.0系列三：Drawer navigation的使用
此前几篇系列文章，主要讲了StackNavigator, TavNavigation以及Drawer Navigation的使用讲解，现实中往往是不同的导航组件组合进行使用的，本篇文章主要讲解导航的嵌套使用及注意事项。
@[toc]

创建需要的页面

// 设置页面
const SettingsScreen = ({ navigation }) => {
  return (
    
      SettingScreen
       navigation.navigate('Detail')}
      />
    
  )
}
// 首页
const HomeScreen = ({ navigation }) => {
  return (
    
      HomeScreen
       navigation.navigate('Detail')}
      />
    
  )
}
// 详情页
const DetailScreen = ({ navigation }) => {
  return (
    
      DetailScreen
       navigation.navigate('Detail')}
        onPress={() => navigation.push('Detail')}
      />
       navigation.navigate('Home')} />
       navigation.goBack()} />
       navigation.popToTop()}
      />
    
  )
}

创建三个对应的导航器实例

const Tab = createBottomTabNavigator(); // 选项卡页签tab navigator 实例
const RootStack = createStackNavigator(); // 堆栈stack 实例
const Drawer = createDrawerNavigator(); //  抽屉drawer实例

创建底部导航路由，采用系列二文章代码

function IconWithBadge({ icon, badgeCount, size }) {
  return (
    
      
      {badgeCount > 0 && (
        
          
            {badgeCount}
          
        
      )}
    
  );
}
function HomeIconWithBadge(props) {
  // You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
  return ;
}

const TabScreen = () => {
  return (
     ({
      tabBarIcon: ({ focused, color, size }) => {
        if (route.name === 'Home') {
          return (
            
          );
        } else if (route.name === 'Settings') {
          return (
            
          );
        }
      },
    })}
    tabBarOptions={{
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }}
    >
      
      
    
  )
}

堆栈(Stack)与Tab嵌套

const rootRouteScreen = () => {
  return (
          
          
         
  )
}

Stack Navigator, Tab Navigator与Drawer Navigator综合嵌套

const App = () => {
  return (
    
       }
      >
        
        
      
    
  );
}

最后我们来看一下效果

通过下面视频更加直观一些
[video(video-5GPKnsTt-1588585743833)(type-bilibili)(url-https://player.bilibili.com/p...://ss.csdn.net/p?http://i2.hdslb.com/bfs/archi...]

传递参数

非嵌套导航使用如下的方式进行传递和接收参数如下方式

// 传递参数
 props.navigation.navigate('Detail',{
          itemId: 86,
          otherParam: 'anything you want here',
        })}
      />
// 接收参数
const DetailScreen = ({ route, navigation }) => {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    
      DetailScreen: {itemId} {otherParam}
    
  )
}

在嵌套导航中进行参数传递，需要额外加一个params 的key

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

嵌套导航的最佳实践

建议将嵌套做到最少，应该尝试采用尽可能少的嵌套来实现你的业务需求，因为多层嵌套会导致如下几个问题：

• 在多层嵌套的页面，代码难以维护
• 深度嵌套的视图层次结构，这可能会导致低端设备的内存和性能问题
• 嵌套相同类型的导航器（例如，选项卡内的选项卡，抽屉内的抽屉等）让用户的体验极差

其他问题

官网也列举了一下常见的问题，朋友们在集成过程中遇到问题可以通过如下地址看一下
Troubleshooting, 当然还有Github上的issues 地址：关于React-Navigation的问题

觉得文章不错的，给我点个赞哇，关注一下呗！
技术交流可关注微信公众号【君伟说】，加我好友一起探讨
微信交流群：加好友（备注技术交流）邀你入群，抱团学习共进步