RN路由

##引言本来打算将React Navigation-Guides这一章内容集中写在这篇文章内的，但由于篇幅太长，阅读的时候很费劲，所以这里将Guides这一章的内容分篇来记录。首先，我们来看看Tab navigation！

##Tab navigation 移动应用中最常见的导航样式可能是基于标签的导航。它可以是屏幕底部的标题，也可以是标题下方的顶部（甚至代替标题）。

本指南介绍createBottomTabNavigator。您也可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator将选项卡添加到您的应用程序。

在继续之前，请先安装@ react-navigation / bottom-tabs：

npm

npm install @react-navigation/bottom-tabs
yarn

yarn add @react-navigation/bottom-tabs

1 基于标签的导航的最小示例

1import * as React from 'react';
2import { Text, View } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5
6function HomeScreen() {
7  return (
8    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
9      <Text>Home!</Text>
10    </View>
11  );
12}
13
14function SettingsScreen() {
15  return (
16    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
17      <Text>Settings!</Text>
18    </View>
19  );
20}
21
22const Tab = createBottomTabNavigator();
23
24export default function App() {
25  return (
26    <NavigationContainer>
27      <Tab.Navigator>
28        <Tab.Screen name="Home" component={HomeScreen} />
29        <Tab.Screen name="Settings" component={SettingsScreen} />
30      </Tab.Navigator>
31    </NavigationContainer>
32  );
33}

Try this example on Snack

2 自定义外观

这类似于自定义stack导航器的方式—初始化tab导航器时会设置一些属性，而其他属性则可以在options中按屏幕自定义。

1// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
2// react-native-vector-icons/Ionicons otherwise.
3import Ionicons from 'react-native-vector-icons/Ionicons';
4
5// (...)
6
7export default function App() {
8  return (
9    <NavigationContainer>
10      <Tab.Navigator
11        screenOptions={({ route }) => ({
12          tabBarIcon: ({ focused, color, size }) => {
13            let iconName;
14
15            if (route.name === 'Home') {
16              iconName = focused
17                ? 'ios-information-circle'
18                : 'ios-information-circle-outline';
19            } else if (route.name === 'Settings') {
20              iconName = focused ? 'ios-list-box' : 'ios-list';
21            }
22
23            // You can return any component that you like here!
24            return <Ionicons name={iconName} size={size} color={color} />;
25          },
26        })}
27        tabBarOptions={{
28          activeTintColor: 'tomato',
29          inactiveTintColor: 'gray',
30        }}
31      >
32        <Tab.Screen name="Home" component={HomeScreen} />
33        <Tab.Screen name="Settings" component={SettingsScreen} />
34      </Tab.Navigator>
35    </NavigationContainer>
36  );
37}

Try this example on Snack

让我们对此进行剖析：

tabBarIcon是底部标签导航器中受支持的option。因此，我们知道可以在options prop的屏幕组件上使用它，但在这种情况下，选择将其放在Tab.Navigator的screenOptions prop中，以便于集中图标配置，便于使用。
tabBarIcon是一个具有焦点状态，颜色和大小参数的函数。如果您进一步浏览配置，将会看到tabBarOptions以及activeTintColor和inactiveTintColor。这些默认值是iOS平台默认值，但是您可以在此处更改它们。传递到tabBarIcon的颜色是活动的还是不活动的，具体取决于聚焦状态（聚焦为活动）。大小是标签栏期望的图标大小。
阅读 full API reference 参考，以获取有关createBottomTabNavigator配置options的更多信息。

3 icons上添加badge

有时我们想在某些图标上添加badge。一种常见的方法是使用一个额外的视图容器，并以绝对定位的方式设置badge元素。

1function IconWithBadge({ name, badgeCount, color, size }) {
2  return (
3    <View style={{ width: 24, height: 24, margin: 5 }}>
4      <Ionicons name={name} size={size} color={color} />
5      {badgeCount > 0 && (
6        <View
7          style={{
8            // On React Native < 0.57 overflow outside of parent will not work on Android, see https://git.io/fhLJ8
9            position: 'absolute',
10            right: -6,
11            top: -3,
12            backgroundColor: 'red',
13            borderRadius: 6,
14            width: 12,
15            height: 12,
16            justifyContent: 'center',
17            alignItems: 'center',
18          }}
19        >
20          <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
21            {badgeCount}
22          </Text>
23        </View>
24      )}
25    </View>
26  );
27}

从UI角度来看，该组件已准备就绪，可以使用，但是您仍然需要找到某种方法从其他地方正确传递徽章计数，例如使用 React Context, Redux, MobX 或 event emitters.

1function HomeIconWithBadge(props) {
2  // You should pass down the badgeCount in some other ways like React Context API, Redux, MobX or event emitters.
3  return <IconWithBadge {...props} badgeCount={3} />;
4}

Try this example on Snack

4 tabs之间跳转

切换tab使用同样的API - navigation.navigate。

1function HomeScreen({ navigation }) {
2  return (
3    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
4      <Text>Home!</Text>
5      <Button
6        title="Go to Settings"
7        onPress={() => navigation.navigate('Settings')}
8      />
9    </View>
10  );
11}
12
13function SettingsScreen({ navigation }) {
14  return (
15    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
16      <Text>Settings!</Text>
17      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
18    </View>
19  );
20}

Try this example on Snack

5 每个tab上的stack导航

通常，tab上不仅显示一个页面，例如，在您的Twitter feed上，您可以点击一条推文，将会跳转到这个tab里包含的一个新页面。您可以认为这是因为每个tab中都有单独的导航堆栈，这正是我们在React Navigation中建模的方式。

1import * as React from 'react';
2import { Button, Text, View } from 'react-native';
3import { NavigationContainer } from '@react-navigation/native';
4import { createStackNavigator } from '@react-navigation/stack';
5import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
6
7function DetailsScreen() {
8  return (
9    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
10      <Text>Details!</Text>
11    </View>
12  );
13}
14
15function HomeScreen({ navigation }) {
16  return (
17    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
18      <Text>Home screen</Text>
19      <Button
20        title="Go to Details"
21        onPress={() => navigation.navigate('Details')}
22      />
23    </View>
24  );
25}
26
27function SettingsScreen({ navigation }) {
28  return (
29    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
30      <Text>Settings screen</Text>
31      <Button
32        title="Go to Details"
33        onPress={() => navigation.navigate('Details')}
34      />
35    </View>
36  );
37}
38
39const HomeStack = createStackNavigator();
40
41function HomeStackScreen() {
42  return (
43    <HomeStack.Navigator>
44      <HomeStack.Screen name="Home" component={HomeScreen} />
45      <HomeStack.Screen name="Details" component={DetailsScreen} />
46    </HomeStack.Navigator>
47  );
48}
49
50const SettingsStack = createStackNavigator();
51
52function SettingsStackScreen() {
53  return (
54    <SettingsStack.Navigator>
55      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
56      <SettingsStack.Screen name="Details" component={DetailsScreen} />
57    </SettingsStack.Navigator>
58  );
59}
60
61const Tab = createBottomTabNavigator();
62
63export default function App() {
64  return (
65    <NavigationContainer>
66      <Tab.Navigator>
67        <Tab.Screen name="Home" component={HomeStackScreen} />
68        <Tab.Screen name="Settings" component={SettingsStackScreen} />
69      </Tab.Navigator>
70    </NavigationContainer>
71  );
72}

Try this example on Snack

6 为什么要用TabNavigator代替TabBarIOS或其他一些组件

尝试使用独立的tab bar组件而不将其集成到您在应用程序中使用的导航库中是很常见的。在某些情况下，这很好！但是，应该警告您，这样做时可能会遇到一些令人沮丧的意外问题。

例如，React Navigation的标签导航器会为您处理Android后退按钮，而独立组件通常不会。此外，如果您（作为开发人员）需要为其调用两个不同的API，则执行诸如“跳至该选项卡，然后转到此屏幕”之类的操作更加困难。最后，移动用户界面有许多小的设计细节，要求某些组件知道其他组件的布局或存在性-例如，如果您具有半透明的标签栏，则内容应在其下方滚动，并且滚动视图应具有插图在底部等于标签栏的高度，因此您可以看到所有内容。双击选项卡栏，应使活动导航堆栈弹出到堆栈顶部，再次进行操作应将活动滚动视图滚动到该堆栈顶部。尽管并非所有这些行为都可以通过React Navigation开箱即用地实现，但是如果使用独立的选项卡视图组件，它们将是实现的，并且您将不会获得任何这些行为。

7 tab导航器包含一个stack，想在特定屏幕上隐藏tab bar

See the documentation here

总结

这部分内容主要讲的是tab navigation的使用方法，使用这个组件可以很方便的设置tab导航的结构，也易于扩展和维护，熟悉的朋友应该也有同感！在设置badge上，需要另外去研究一下，后续补充这部分内容。

喜欢的朋友，麻烦点个star哦，谢谢啦~

上一章节：RN路由-React Navigation组件5.x-基本原理(中文文档)

下一章节：RN路由-React Navigation--Drawer navigation

参考文档：React Navigation - Tab navigation

1 基于标签的导航的最小示例

2 自定义外观

3 icons上添加badge

4 tabs之间跳转

5 每个tab上的stack导航

6 为什么要用TabNavigator代替TabBarIOS或其他一些组件

7 tab导航器包含一个stack，想在特定屏幕上隐藏tab bar

总结

评论区

相关推荐