[快速上手RN] 3. React native 制作底部導(dǎo)航欄 Bottom Tab Bar

這篇具有很好參考價(jià)值的文章主要介紹了[快速上手RN] 3. React native 制作底部導(dǎo)航欄 Bottom Tab Bar。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

系列教程

[快速上手RN] 0.React Native 快速啟動(dòng)項(xiàng)目
[快速上手RN] 1. React native 項(xiàng)目集成UI Kitten
[快速上手RN] 2. React native 項(xiàng)目色彩主題色編輯及使用
[快速上手RN] 3. React native 制作底部導(dǎo)航欄 Bottom Tab Bar
[快速上手RN] 4. React native 集成redux

1.最終效果

首先我們確認(rèn)目標(biāo)

在APP底部新增一個(gè)導(dǎo)航欄
導(dǎo)航欄點(diǎn)擊tab時(shí)會(huì)切換頁(yè)面內(nèi)容
tab包含Icon、名稱，并且切換時(shí)會(huì)顏色變更
如下圖

1. 安裝依賴

我們所需要的依賴如下

react-navigation
@react-navigation/native
@react-navigation/native-stack
@react-navigation/bottom-tabs
以上4個(gè)主要是用于做頁(yè)面棧的路由功能，用于更好的定義每個(gè)頁(yè)面的狀態(tài)，以及跳轉(zhuǎn)方式，還有頭部的表現(xiàn)形式等等，如果想不僅限于用，還想知道react-navigation的工作方式或深入了解使用方式，請(qǐng)查閱相關(guān)文檔~
地址:https://reactnavigation.org
UI Kitten
我們需要使用它的組件來(lái)快速構(gòu)建我們的底部導(dǎo)航欄
react-native-safe-area-context
我們需要考慮到ios界面時(shí)存在Home Indicator (底部的白色小橫線)時(shí)，與我們的頁(yè)面沖突的情況，所以需要該插件來(lái)幫助我們界定一個(gè)安全區(qū)域
Expo
Expo是一個(gè)非常好用的工具，這次我們將使用他的Icon組件，如果自己有自己的Icon，那么本次可以不使用它

1.1 安裝react-navigation相關(guān)依賴

安裝命令如下，如果覺(jué)得麻煩可以復(fù)制粘貼~

react-navigation

npm install react-navigation @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs --save

react-native-safe-area-context

npm install react-native-safe-area-context --save

1.2 安裝UI Kitten

具體請(qǐng)查看博文
[快速上手RN] 1. React native 項(xiàng)目集成UI Kitten
這里暫不贅述

1.3 使用Expo

如果你的項(xiàng)目是通過(guò)Expo啟動(dòng)的，那么直接使用即可，否則也可以使用自己的Icon庫(kù)或者試試好用的Expo來(lái)開(kāi)發(fā)~
參考博文
[快速上手RN] 0.React Native 快速啟動(dòng)項(xiàng)目

2.創(chuàng)建文件

在你的項(xiàng)目目錄下的src文件夾中創(chuàng)建導(dǎo)航欄文件夾navigator
在src/navigator/下創(chuàng)建2個(gè)文件
1.AppNavigator.jsx用于export項(xiàng)目的整個(gè)導(dǎo)航
2.TabNavigation.jsx用于編寫(xiě)底部導(dǎo)航欄的相關(guān)代碼

3.AppNavigator.jsx

以下為該文件代碼，根據(jù)react-navigation的文檔，我們需要做一個(gè)container包住navigator，并導(dǎo)出以便App.js使用
需要import TabNavigation

import { NavigationContainer } from "@react-navigation/native";
import TabNavigatorScreen from "./TabNavigation";


export default function () {
  return (
    <NavigationContainer>
      <TabNavigatorScreen />
    </NavigationContainer>
  );
}

4.TabNavigation.jsx

打開(kāi)TabNavigation.jsx

4.1 引入依賴

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {
  BottomNavigation,
  BottomNavigationTab,
  Layout,
  Text,
} from "@ui-kitten/components"; // UI Kitten的組件
import { MaterialIcons } from "@expo/vector-icons"; // 用于Icon

4.2 創(chuàng)建Home頁(yè)面

我們需要?jiǎng)?chuàng)建頁(yè)面組件，“首頁(yè)”和“我的”，如果你已經(jīng)有自己的頁(yè)面了，那么直接使用！

const HomeScreen = (props) => {
  return (
	<Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home Screen</Text>
    </Layout>
  );
};

4.3 創(chuàng)建Home頁(yè)面棧

Tips:

screenOptions用于設(shè)置頁(yè)面的一些屬性狀態(tài)，headerShown表示是否顯示頭部，可以改為true試一試，默認(rèn)是true
initialRouteName表示設(shè)置該頁(yè)面棧的默認(rèn)路由
這個(gè)頁(yè)面棧內(nèi)可以有一個(gè)或多個(gè)Screen，也就是多屏頁(yè)面，你可以放多個(gè)頁(yè)面在里面，并且HomeStack內(nèi)的頁(yè)面可以一次跳轉(zhuǎn)，類似ios上的側(cè)滑打開(kāi)，并支持橫向滑動(dòng)返回上一頁(yè)
我們需要createNativeStackNavigator后再使用
return的是一個(gè)組件

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
    </HomeStack.Navigator>
  );
};

4.4 Repeat，我們?cè)賱?chuàng)建一個(gè)“我的”頁(yè)面以及對(duì)應(yīng)的Stack

Code

const AccountScreen = (props) => {
  return (
	<Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Account Screen</Text>
    </Layout>
  );
};

const AccountStack = createNativeStackNavigator();

const AccountStackScreen = () => {
  return (
    <AccountStack.Navigator
      initialRouteName="Account"
      screenOptions={{
        headerShown: false,
      }}
    >
      <AccountStack.Group>
        <AccountStack.Screen name="Account" component={AccountScreen} />
      </AccountStack.Group>
    </AccountStack.Navigator>
  );
};

4.5 編寫(xiě)B(tài)ottomTabBar樣式組件

Tips

這里使用的是UI Kitten的組件，props的來(lái)源是React-navigation
props中的navigation和state，在其他頁(yè)面內(nèi)也會(huì)存在
1. navigation.navigate(傳入路由名稱)可以用于切換頁(yè)面，navigation.push(傳入路由名稱)可以插入頁(yè)面到頁(yè)面棧
2. 其他的還請(qǐng)查閱Navigation prop reference
3. state內(nèi)的index表明當(dāng)前選中的是第幾個(gè)tab
MaterialIcons組件是Icon組件，可以替換為你的Icon組件，記得需要函數(shù)形式，因?yàn)槲覀冃枰猵rops中的顏色來(lái)保證Icon的顏色是正確的狀態(tài)
如果使用expo的icon，可以前往這里找到你需要的icon https://icons.expo.fyi
appearance="noIndicator"指定不需要指示線，更多api請(qǐng)查閱UI Kitten的bottom-tabs api

Code

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    appearance="noIndicator"
    onSelect={(index) => navigation.navigate(state.routeNames[index])}
  >
    <BottomNavigationTab
      title="Home"
      icon={(props) => (
        <MaterialIcons
          name="home"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
    <BottomNavigationTab
      title="Account"
      icon={(props) => (
        <MaterialIcons
          name="account-circle"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
  </BottomNavigation>
);

4.6 編寫(xiě)TabNavigation交互組件并export

Code

const TabNavigator = createBottomTabNavigator();
const TabNavigatorScreen = () => {
  return (
    <TabNavigator.Navigator tabBar={(props) => <BottomTabBar {...props} />}>
      <TabNavigator.Screen name="HomeStackScreen" component={HomeStackScreen} />
      <TabNavigator.Screen
        name="AccountStackScreen"
        component={AccountStackScreen}
      />
    </TabNavigator.Navigator>
  );
};

export default TabNavigatorScreen;

4.7 該文件完整代碼

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  import {
    BottomNavigation,
    BottomNavigationTab,
    Layout,
    Text,
  } from "@ui-kitten/components";
import { MaterialIcons } from "@expo/vector-icons";

// screens
// import AccountScreen from "../screens/Account";

const HomeScreen = (props) => {
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home Screen</Text>
    </Layout>
  );
};

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
    </HomeStack.Navigator>
  );
};

const AccountScreen = (props) => {
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Account Screen</Text>
    </Layout>
  );
};

const AccountStack = createNativeStackNavigator();

const AccountStackScreen = () => {
  return (
    <AccountStack.Navigator
      initialRouteName="Account"
      screenOptions={{
        headerShown: false,
      }}
    >
      <AccountStack.Group>
        <AccountStack.Screen name="Account" component={AccountScreen} />
      </AccountStack.Group>
    </AccountStack.Navigator>
  );
};

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    appearance="noIndicator"
    onSelect={(index) => navigation.navigate(state.routeNames[index])}
  >
    <BottomNavigationTab
      title="Home"
      icon={(props) => (
        <MaterialIcons
          name="home"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
    <BottomNavigationTab
      title="Account"
      icon={(props) => (
        <MaterialIcons
          name="account-circle"
          size={24}
          color={props.style.tintColor}
        />
      )}
    />
  </BottomNavigation>
);

const TabNavigator = createBottomTabNavigator();
const TabNavigatorScreen = () => {
  return (
    <TabNavigator.Navigator tabBar={(props) => <BottomTabBar {...props} />}>
      <TabNavigator.Screen name="HomeStackScreen" component={HomeStackScreen} />
      <TabNavigator.Screen
        name="AccountStackScreen"
        component={AccountStackScreen}
      />
    </TabNavigator.Navigator>
  );
};

export default TabNavigatorScreen;

5.最后一步，在App.js中使用它

import React from "react";
import * as eva from "@eva-design/eva";
import { ApplicationProvider } from "@ui-kitten/components"; // Provider 
import AppNavigator from "./src/navigator/AppNavigator"; // 導(dǎo)航
import { default as theme } from "./src/color/custom-theme.json"; // 如果沒(méi)制作主題文件，可參考上一篇博文，或刪除該段代碼以及下方的theme變量使用
import { SafeAreaView } from "react-native-safe-area-context"; // 安全邊界

const App = () => {
  return (
      <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
        <SafeAreaView style={{ flex: 1 }}>
          <AppNavigator />
        </SafeAreaView>
      </ApplicationProvider>
  );
};

export default App;

完成！如有幫助請(qǐng)關(guān)注點(diǎn)贊~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-448872.html

到了這里，關(guān)于[快速上手RN] 3. React native 制作底部導(dǎo)航欄 Bottom Tab Bar的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！