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 (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>SettingScreen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Detail')}
      />
    </View>
  )
}
// 首頁
const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>HomeScreen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Detail')}
      />
    </View>
  )
}
// 詳情頁
const DetailScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>DetailScreen</Text>
      <Button
        title="Go to Detail Again"
        // onPress={() => navigation.navigate('Detail')}
        onPress={() => navigation.push('Detail')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  )
}

建立三個對應的導航器實例

const Tab = createBottomTabNavigator(); // 選項卡頁籤tab navigator 實例
const RootStack = createStackNavigator(); // 堆棧stack 實例
const Drawer = createDrawerNavigator(); //  抽屜drawer實例

建立底部導航路由，採用系列二文章代碼

function IconWithBadge({ icon, badgeCount, size }) {
  return (
    <View style={{ width: 24, height: 24, margin: 5 }}>
      <Image source={icon} style={{
        width: size,
        height: size
      }} />
      {badgeCount > 0 && (
        <View
          style={{
            // On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
            position: 'absolute',
            right: -6,
            top: -3,
            backgroundColor: 'red',
            borderRadius: 6,
            width: 12,
            height: 12,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
            {badgeCount}
          </Text>
        </View>
      )}
    </View>
  );
}
function HomeIconWithBadge(props) {
  // You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
  return <IconWithBadge {...props} badgeCount={3} />;
}

const TabScreen = () => {
  return (
    <Tab.Navigator 
    headerMode='none' 
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        if (route.name === 'Home') {
          return (
            <HomeIconWithBadge
              icon={
                focused
                  ? HomeIconActive
                  : HomeIconNormal
              }
              size={size}
              color={color}
            />
          );
        } else if (route.name === 'Settings') {
          return (
            <Image
              source={focused ? WorkIconActive : WorkIconNormal}
              style={{width: size, height: size}}
            />
          );
        }
      },
    })}
    tabBarOptions={{
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  )
}

堆棧(Stack)與Tab嵌套

const rootRouteScreen = () => {
  return (<RootStack.Navigator initialRouteName={'TabNav'}>
          <RootStack.Screen name='TabNav' component={TabScreen} />
          <RootStack.Screen name="Detail" component={DetailScreen} />
         </RootStack.Navigator>
  )
}

Stack Navigator, Tab Navigator與Drawer Navigator綜合嵌套

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home"
        drawerType='slide'
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name='root' component={rootRouteScreen} />
        <Drawer.Screen name='Setting' component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

最後咱們來看一下效果 (type-bilibili)(url-https://player.bilibili.com/player.html?aid=625504500)(image-https://ss.csdn.net/p?http://i2.hdslb.com/bfs/archive/23d0e36df0378cbd3a16ab49d57a746db853648c.jpg)(title-ReactNative官方推薦導航ReactNavigation5.0版導航嵌套)]

傳遞參數

非嵌套導航使用以下的方式進行傳遞和接收參數以下方式

// 傳遞參數
<DrawerItem
        label="Help"
        onPress={() => props.navigation.navigate('Detail',{
          itemId: 86,
          otherParam: 'anything you want here',
        })}
      />
// 接收參數
const DetailScreen = ({ route, navigation }) => {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>DetailScreen: {itemId} {otherParam}</Text>
    </View>
  )
}

在嵌套導航中進行參數傳遞，須要額外加一個params 的key

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

嵌套導航的最佳實踐

建議將嵌套作到最少，應該嘗試採用儘量少的嵌套來實現你的業務需求，由於多層嵌套會致使以下幾個問題：

• 在多層嵌套的頁面，代碼難以維護
• 深度嵌套的視圖層次結構，這可能會致使低端設備的內存和性能問題
• 嵌套相同類型的導航器（例如，選項卡內的選項卡，抽屜內的抽屜等）讓用戶的體驗極差

其餘問題

官網也列舉了一下常見的問題，朋友們在集成過程當中遇到問題能夠經過以下地址看一下 Troubleshooting, 固然還有Github上的issues 地址：關於React-Navigation的問題

以爲文章不錯的，給我點個贊哇，關注一下唄！ 技術交流可關注微信公衆號【君偉說】，加我好友一塊兒探討 微信交流羣：加好友（備註技術交流）邀你入羣，抱團學習共進步