React-Navigation 5.X 学习记录（二）------ TabNavigator 篇

        文章只涵盖createBottomTabNavigator。您还可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator在应用程序中添加标签。在继续之前，请先安装@react-navigation/bottom-tabs

安装

yarn add @react-navigation/bottom-tabs

使用

如果您看了上一章节点击此处查看或者您之前使用过，那么您对React-Navigation有了一定的了解，下面请看一段关于tabNavigator的代码。

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

选项配置

• Tab.Navigator

  1. initialRouteName
     导航首次加载时要渲染的路线的名称。
  2. screenOptions
     导航中用于屏幕的默认选项。
  3. backBehavior
     后退按钮处理的行为。
          initialRoute： 返回初始标签
          order： 返回上一个标签页（按照标签页中显示的顺序）
          history： 返回上次访问的标签页
          none：不处理后退按钮
  4. lazy
     默认为true。如果为false，则所有选项卡都将立即呈现。如果为true，则仅在首次使选项卡处于活动状态时才显示它们。注意：选项卡不会在后续访问时重新呈现。
  5. tabBar
     返回React元素以显示为选项卡栏的函数
  6. tabBarOptions
     包含选项卡栏组件的道具的对象。它可以包含以下属性：
          activeTintColor -活动标签的标签和图标颜色。
          activeBackgroundColor -活动标签的背景颜色。
          inactiveTintColor -非活动标签的标签和图标颜色。
          inactiveBackgroundColor -非活动标签的背景颜色。
          showLabel -是否显示标签标签，默认为true。
          showIcon -是否显示标签图标，默认为true。
          style -标签栏的样式对象。
          labelStyle -标签标签的样式对象。
          labelPosition-在何处显示与标签图标相关的标签标签。可用值为beside-icon和below-icon。默认为beside-icon。
          tabStyle -标签的样式对象。
          allowFontScaling -标签字体是否应缩放以符合“文本大小”辅助功能设置，默认为true。
          adaptive-标签图标和标签对齐方式是否应根据屏幕尺寸而改变？true对于iOS 11 false，默认值为。如果，标签图标和标签始终垂直对齐。当时true，标签图标和标签在平板电脑上水平对齐。
          safeAreaInset-覆盖forceInset道具。默认为{ bottom: ‘always’, top: ‘never’ }。可用的键top | bottom | left | right随值一起提供’always’ | ‘never’。
          keyboardHidesTabBar-默认为false。如果true在键盘打开时隐藏标签栏。

• options
  可用于配置导航内的各个屏幕。支持的选项有：

  1. title
     通用标题可以用作备用headerTitle和tabBarLabel。
  2. tabBarVisible
     true或false显示或隐藏标签栏（如果未设置），则默认为true。
  3. tabBarIcon
     给定的函数{ focused: boolean, color: string, size: number }返回一个React.Node，以显示在选项卡栏中。
  4. tabBarLabel
     显示在选项卡栏中的选项卡的标题字符串或给定的函数将{ focused: boolean, color: string }返回React.Node，以显示在选项卡栏中。未定义时，使用场景title。
  5. tabBarButton
     该函数返回一个React元素以呈现为选项卡按钮。它包装图标和标签并实现onPress。TouchableWithoutFeedback默认情况下渲染。tabBarButton: props => 会TouchableOpacity改为使用。
  6. tabBarAccessibilityLabel
     选项卡按钮的辅助功能标签。当用户点击选项卡时，屏幕阅读器会读取该内容。如果您没有标签的标签，建议您进行设置。
  7. tabBarTestID
     在测试中找到此选项卡按钮的ID。
  8. unmountOnBlur
     离开该屏幕时是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认为false。

import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

• 事件

  1. tabPress
     当用户在选项卡栏中按当前屏幕的选项卡按钮时，将触发此事件。默认情况下，按Tab键可做几件事：
         如果选项卡未聚焦，则按Tab键将使该选项卡聚焦
         如果选项卡已经聚焦：
             如果选项卡的屏幕呈现滚动视图，则滚动到顶部由 useScrollToTop
             如果选项卡的屏幕呈现堆栈导航器，popToTop则会在堆栈上执行操作
  2. tabLongPress
     当用户长时间按下选项卡栏中当前屏幕的选项卡按钮时，将触发此事件。如果您有一个自定义标签栏，请确保发出此事件。

• 将徽章添加到图标

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

function IconWithBadge({ name, badgeCount, color, size }) {
  return (
    <View style={{ width: 24, height: 24, margin: 5 }}>
      <Ionicons name={name} size={size} color={color} />
      {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>
  );
}

• TabNavigator 中的 StackNavigator

  两者结合使用如下所示，也可以stackNavigator包裹TabNavigator

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

更多相关信息请点击此处查看。