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

已于 2022-02-28 00:04:42 修改
阅读量8.4k 收藏 12
点赞数 4
分类专栏： 前端 文章标签： react native ui react.js
于 2022-02-27 12:42:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iskelel/article/details/123142013
版权

[快速上手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;

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

iMingzhen
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
reactnative底部导航栏
08-10
react-native底部导航栏，支持Android和iOS。
react native 实现自定义底部导航与路由文件配置
m0_61672533的博客
03-15 705
react native 实现自定义底部导航
React Native Tab Navigator：一款强大的选项卡导航组件
最新发布
gitblog_00089的博客
03-23 403
React Native Tab Navigator：一款强大的选项卡导航组件 项目地址:https://gitcode.com/exponentjs/react-native-tab-navigator 项目介绍 React Native Tab Navigator 是一款基于 React Native 的选项卡导航组件，可以轻松地实现选项卡导航功能。该项目的 GitHub 链接为：https:...
定制化你的ReactNative底部导航栏
weixin_33966365的博客
01-29 415
前言 ​ 接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件 createBottomTabNavigator createMaterialBottomTabNavigator 分别是这样的 尽管官方提供了导航栏的开箱即用方案,但是实际开发里面,我们会遇到各种各样的导航栏,各种各样的动效,所以以上可能无法满足我们的开发...
react-navigation的使用，实现app底部导航栏
weixin_55510188的博客
07-27 2187
配置文件android/app/src/main/java//MainActivity.java。修改app/nav/Nav.js，options添加tabBarIcon属性，它接收一个函数返回reactnode。Android需要进行如下配置。6、icon图标的引入(使用。1、在项目中安装所需的包。3、将整个应用程序包在。4、封装一个导航组件。......
React Native之头部导航组件
02-23
适用于React Native项目。这个一个名为头部导航栏的UI组件，可自定义头部导航栏，轻松做出好看的头部导航栏。建议与React-Navigator搭配使用。
React-Native 实现点击Tab标签切换Tab页面
07-29
React-Native tabbar 的简单使用
ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)
qq_37117521的博客
03-16 2157
持续更新噢~
React Native初级入门到项目实战
10-13
ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序，“Learn once，write anywhere”。使用ReactNative开发，既拥有Native的良好人机交互体验，又保留了React框架的开发效率，集Native应用和Web应用优点于一身。
react native 开发APP（四）页面导航, Tabbar, Navigation
chmod_R_755的专栏
04-04 1114
react native 页面跳转，Tabbar，Navigation 官网 https://reactnative.cn/ 项目下载地址：https://github.com/hebiao6446/DemoProject 陆续更新中。。。 1.先看效果，找一个演示的炮灰 我们至少可以看到两点 1） 目前大部分市场上的APP都是这种结构Tabbar栏+导航栏 2) 从闪屏页面（广告业）到进入A...
react-native 底部标签导航
九段刀客的博客
11-17 71
【代码】react-native 底部标签导航。
详解React Native顶|底部导航使用小技巧
08-29
本篇文章主要介绍了详解React Native顶|底部导航使用小技巧 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React Native中TabBarIOS的简单使用方法示例
11-29
前言 大家应该都知道，TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法，话不多说了，来一起看看详细的介绍吧。 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, TouchableHighlight, Platform, } from 'react
ReactNative底部导航栏（带消息圆点）
11-10
React Native：使用react-native-scrollable-tab-view库的ScrollableTabView实现了想要的功能（控制Tab页面的显示和隐藏、带消息圆点指示器）
react-native-pure-navigation-bar:React Native中完全可定制的导航栏
05-17
React本地纯导航栏 这是React-Native中一个完全可定制的导航栏。 您可以设置导航栏的全局统一样式，并将其添加为每个页面中的react组件。 它支持： 绝对位置样式。 安全区域插入样式。 纵向和横向模式。 Android的半透明属性。 不要自动返回动作。 标题居中或不居中。 导航栏下的分隔符。 字符串，数字或react元素的按钮类型。 带有图像或文本的“返回”按钮。 在每个视图中全局定制样式。 屏幕截图 iPhone X 安卓 安装 通过纱线安装： yarn add react-native-pure-navigation-bar 通过NPM安装： npm install --save react-native-pure-navigation-bar 用法 首先导入文件： import NaviBar from 'react-native
rn-wave-bottom-bar:react动画选项卡底部的栏可进行React导航
05-02
rn-wave-bottom-bar 自定义动画底部标签栏，以实现本机响应。 :floppy_disk: 安装 yarn add rn-wave-bottom-bar 或者 yarn install rn-wave-bottom-bar --save :clipboard: 要求 已安装React-Navigation v5： ： ...
React-Native之TabBar
李白也的博客
01-05 751
TabBar底部导航用法。
React-Native进阶_4.底部标签栏TabBar
编程之美
07-29 4776
原生项目中，我们对底部Tab 很熟悉，点击Tab标签可以切换页面，那么在React-Native 中我们该怎么实现呢。在查了文档后，我们找到了一个TabBarIos ，这个是ios 下使用的Tab 标签，但是没有找到Android 可以使用的，因此 我们需要自己实现，或者使用第三方的，这里，刚接触React不太会自己实现，因此使用github上开源的react-native-tab-navigat
RN实现tabbar
【03】的博客
11-29 506
组件准备 @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs react-native-vector-icons/Ionicons 核心代码 import React, {Component} from 'react'; import {NavigationContainer} from "@react-navigation/native"; import {createStackNavigator
reactnative底部导航
09-06
React Native 提供了一种方便的方式来创建底部导航栏。你可以使用第三方库，比如 `react-navigation` 或 `react-native-navigation`，来实现底部导航。 下面是使用 `react-navigation` 库创建底部导航的简单示例： 1. 首先，确保你已经安装了 `react-navigation` 库： ``` npm install @react-navigation/native ``` 2. 创建一个底部导航的组件： ```jsx import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { faHome, faUser } from '@fortawesome/free-solid-svg-icons'; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faHome} color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => ( <FontAwesomeIcon icon={faUser} color={color} size={size} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); }; export default BottomTabNavigator; ``` 在上面的示例中，我们创建了一个包含两个屏幕（Home 和 Profile）的底部导航栏。我们使用了 `@fortawesome/react-native-fontawesome` 库来渲染图标，你也可以选择其他的图标库。 3. 创建 HomeScreen 和 ProfileScreen 组件，并实现它们的功能。 4. 在入口文件中使用底部导航组件： ```jsx import React from 'react'; import BottomTabNavigator from './BottomTabNavigator'; const App = () => { return <BottomTabNavigator />; }; export default App; ``` 这样，你就可以在 React Native 应用中使用底部导航栏了。当然，还有其他一些配置和功能可以使用，请参考 `react-navigation` 的文档以获取更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值