一. 简介

React-Native-Tab-View 是一种用于构建基于 React Native 的选项卡导航的组件。它由 React Native 社区维护，具有质量和功能上的稳定性。主要功能包括：

多种标签效果：可实现 TabBar 标签居上、居下、居左、居右，支持高度自由定制导航栏。
多种页面布局：可实现渐变、动画、翻转等多种页面切换效果，支持自己实现间隔器、拖拽效果等扩展。
适用于多平台：React Native-Tab-View 不仅可以运用在 Android 平台上，还可以运用在 iOS 和 Web 平台上。

二. 安装

使用 React-Native-Tab-View 对项目进行安装，请进行以下操作：

npm install react-native-tab-view
# or
yarn add react-native-tab-view

三. 基本用法

功能本质的组件必然会衍生出各种不一样的需求，因此，官方提供了各种常用结构封装，同时也提供了很强的自定义性，下面是本篇文章的代码示例。建议在真机测试，以获取更好的效果。

1）标签居上

打开 App.js 文件，采用标签导航居上的方式实现页面跳转。

import React, { useState } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { SceneMap, TabView } from 'react-native-tab-view';
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});
const App = () => {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
  const renderTabBar = (props) => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: 'white' }}
      style={{ backgroundColor: 'pink' }}
    />
  );
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      renderTabBar={renderTabBar}
    />
  );
};
export default App;

2）标签居下

以上代码示例中的标签是居上的，接下来我们将采用标签居下的方式实现页面跳转。

...
import { BottomTabBar, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          activeTintColor: '#e91e63',
          labelPosition: 'beside-icon',
        }}
      >
        <Tab.Screen
          name="Home"
          component={FirstRoute}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: () => <Icon name="camera" size={25} />,
          }}
        />
        <Tab.Screen
          name="Setting"
          component={SecondRoute}
          options={{
            tabBarLabel: 'Setting',
            tabBarIcon: () => <Icon name="setting" size={25} />,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

3）标签居左

以下代码演示了标签居左的功能示例。

...
import { RectButton } from 'react-native-gesture-handler';
const renderLabel = ({ route, focused, color }) => {
  return (
    <View>
      <Text style={{ color }}>{route.title}</Text>
    </View>
  );
};
const renderTabBarItem = ({ route, focused }) => {
  const icon = `ios-${route.key}`;
  return (
    <RectButton style={[styles.tabBarItem, focused && styles.tabBarSelectedItem]}>
      <Ionicons name={icon} size={24} color={focused ? '#fff' : '#222'} />
      <Text style={[styles.tabBarLabel, focused && styles.tabBarSelectedLabel]}>
        {route.title}
      </Text>
    </RectButton>
  );
};
const renderTabBar = (props) => {
  return (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: 'transparent' }}
      renderLabel={renderLabel}
      renderTabBarItem={renderTabBarItem}
      style={[styles.tabBar, { flexDirection: 'row' }]}
    />
  );
};
export default function App() {
  const [index, setIndex] = useState(0);
  const [routes] = useState([
    { key: 'home', title: 'Home' },
    { key: 'cart', title: 'Cart' },
    { key: 'order', title: 'Order' },
    { key: 'profile', title: 'Profile' },
  ]);
  const renderScene = SceneMap({
    home: HomeScene,
    cart: CartScene,
    order: OrderScene,
    profile: ProfileScene,
  });
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      renderTabBar={renderTabBar}
    />
  );
}

四. 总结

React-Native-Tab-View 是构建基于 React Native 的选项卡导航的组件。本篇文章提供了三种不同的实现方式，您可以选择适合您项目的方式进行使用。

React-Native-Tab-View 详解