[快速上手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 = () => {
  return (
    <HomeStack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
    </HomeStack.Navigator>
  );
};

4.4 Repeat，我们再创建一个“我的”页面以及对应的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 编写BottomTabBar样式组件

Tips

1. 这里使用的是UI Kitten的组件，props的来源是React-navigation
2. props中的navigation和state，在其他页面内也会存在
   1. navigation.navigate(传入路由名称)可以用于切换页面，navigation.push(传入路由名称)可以插入页面到页面栈
   2. 其他的还请查阅Navigation prop reference
   3. state内的index表明当前选中的是第几个tab
3. MaterialIcons组件是Icon组件，可以替换为你的Icon组件，记得需要函数形式，因为我们需要props中的颜色来保证Icon的颜色是正确的状态
4. 如果使用expo的icon，可以前往这里找到你需要的icon https://icons.expo.fyi
5. appearance="noIndicator"指定不需要指示线，更多api请查阅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 编写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"; // 导航
import { default as theme } from "./src/color/custom-theme.json"; // 如果没制作主题文件，可参考上一篇博文，或删除该段代码以及下方的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;

完成！如有帮助请关注点赞~