React-Native-Tab-View 詳解

一. 簡介

React-Native-Tab-View 是一種用於構建基於 React Native 的選項卡導航的組件。它由 React Native 社區維護，具有質量和功能上的穩定性。

主要功能包括：

1）多種標籤效果：可實現 TabBar 標籤居上、居下、居左、居右，支持高度自由定製導航欄。

2）多種頁面布局：可實現 漸變、動畫、翻轉 等多種頁面切換效果，支持自己實現間隔器、拖拽效果等擴展。

3）適用於多平台：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 = () => (
    
  );

  const SecondRoute = () => (
    
  );

  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) => (
      
    );

    return (
      
    );
  };

  export default App;
`}

2）標籤居下

以上代碼示例中的標籤是居上的，接下來我們將採用標籤居下的方式實現頁面跳轉。

{`
  ...
  import { BottomTabBar, createBottomTabNavigator } from '@react-navigation/bottom-tabs';

  const Tab = createBottomTabNavigator();

  export default function App() {
    return (
      
        
           ,
            }}
          />
           ,
            }}
          />
        
      
    );
  }
`}

3）標籤居左

以下代碼演示了標籤居左的功能示例。

{`
  ...
  import { RectButton } from 'react-native-gesture-handler';

  const renderLabel = ({ route, focused, color }) => {
    return (
      
        {route.title}
      
    );
  };

  const renderTabBarItem = ({ route, focused }) => {
    const icon = `ios-${route.key}`;
    return (
      
        
        {route.title}
      
    );
  };

  const renderTabBar = (props) => {
    return (
      
    );
  };

  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 (
      
    );
  }
`}

四. 總結

React-Native-Tab-View 是構建基於 React Native 的選項卡導航的組件。本篇文章提供了三種不同的實現方式，您可以選擇適合您項目的方式進行使用。