[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar

系列教程

[快速上手RN] 0.React Native 快速启动项目
[快速上手RN] 1. React native 项目集成UI Kitten
[快速上手RN] 2. React native 项目色彩主题色编辑及使用
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
[快速上手RN] 4. React native 集成redux

1.最终效果

首先我们确认目标

1. 在APP底部新增一个导航栏
2. 导航栏点击tab时会切换页面内容
3. tab包含Icon、名称，并且切换时会颜色变更
   如下图
   

1. 安装依赖

我们所需要的依赖如下

1. react-navigation
2. @react-navigation/native
3. @react-navigation/native-stack
4. @react-navigation/bottom-tabs
   以上4个主要是用于做页面栈的路由功能，用于更好的定义每个页面的状态，以及跳转方式，还有头部的表现形式等等，如果想不仅限于用，还想知道react-navigation的工作方式或深入了解使用方式，请查阅相关文档~
   地址:https://reactnavigation.org
5. UI Kitten
   我们需要使用它的组件来快速构建我们的底部导航栏
6. react-native-safe-area-context
   我们需要考虑到ios界面时存在Home Indicator (底部的白色小横线)时，与我们的页面冲突的情况，所以需要该插件来帮助我们界定一个安全区域
7. Expo
   Expo是一个非常好用的工具，这次我们将使用他的Icon组件，如果自己有自己的Icon，那么本次可以不使用它

1.1 安装react-navigation相关依赖

安装命令如下，如果觉得麻烦可以复制粘贴~

• 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

具体请查看博文
[快速上手RN] 1. React native 项目集成UI Kitten
这里暂不赘述

1.3 使用Expo

如果你的项目是通过Expo启动的，那么直接使用即可，否则也可以使用自己的Icon库或者试试好用的Expo来开发~
参考博文
[快速上手RN] 0.React Native 快速启动项目

2.创建文件

1. 在你的项目目录下的src文件夹中创建导航栏文件夹navigator
2. 在src/navigator/下创建2个文件
   1.AppNavigator.jsx用于export项目的整个导航
   2.TabNavigation.jsx用于编写底部导航栏的相关代码

3.AppNavigator.jsx

以下为该文件代码，根据react-navigation的文档，我们需要做一个container包住navigator，并导出以便App.js使用
需要import TabNavigation

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


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

4.TabNavigation.jsx

打开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 创建Home页面

我们需要创建页面组件，“首页”和“我的”，如果你已经有自己的页面了，那么直接使用！

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

4.3 创建Home页面栈

Tips:

1. screenOptions用于设置页面的一些属性状态，headerShown表示是否显示头部，可以改为true试一试，默认是true
2. initialRouteName表示设置该页面栈的默认路由
3. 这个页面栈内可以有一个或多个Screen，也就是多屏页面，你可以放多个页面在里面，并且HomeStack内的页面可以一次跳转，类似ios上的侧滑打开，并支持横向滑动返回上一页
4. 我们需要createNativeStackNavigator后再使用
5. return的是一个组件

const HomeStack = createNativeStackNavigator();

const HomeStackScreen = ()