自学React-native （第四天）-- BottomTabNavigator 和 MaterialBottomTabNavigator、DrawerNavigator导航

最新推荐文章于 2023-03-16 16:06:54 发布
最新推荐文章于 2023-03-16 16:06:54 发布
阅读量445 收藏 1
点赞数 1
分类专栏： react native React-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangssssx/article/details/87885710
版权

自学React-native （第四天）-- BottomTabNavigator 和 MaterialBottomTabNavigator、DrawerNavigator导航

1.前言：

由于使用了下边栏图标，所以安装了react-native-vector-icons,由于rnvi组件带有自己的ios/android代码所以需要使用命令：react-native link react-native-vector-icons将原生资源引入到本地项目中。影响到的地方:

  • android/settings.gradle
rootProject.name = 'lesson2'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\\node_modules\\react-native-vector-icons\\android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')

include ':app'
  • ios\lesson2.xcodeproj\project.pbxproj
615C19A7FD294504B866D8AB /* libRNGestureHandler.a */ = {isa = PBXFileReference; name = "libRNGestureHandler.a"; path = "libRNGestureHandler.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
		F2CF6488FB2D468B9DB27127 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; name = "RNVectorIcons.xcodeproj"; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
		4DBD5F44AA6F4D888C8DC713 /* libRNVectorIcons.a */ = {isa = PBXFileReference; name = "libRNVectorIcons.a"; path = "libRNVectorIcons.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
		4646F79763BD4A1681E4E82D /* libRNVectorIcons-tvOS.a */ = {isa = PBXFileReference; name = "libRNVectorIcons-tvOS.a"; path = "libRNVectorIcons-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
		6F8A6F7AB3BB450BA888B4FC /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		DCE3CACDE4AA482993A611D1 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		E1408D85CEC641D881E848FA /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		126F4C9744734DE28485F784 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		285C34566016457CB2F74793 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		53DE190FADD64BF5AC104EB4 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		3FE71D63045B4336B305EA4D /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		E41FDA73E3F24A4A8C7FF86A /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		D64D49EE286F44BCBEBF8686 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		74B156CB29204321AA8C7273 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		ABA8981AB0604A9281D5EDCF /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		01198129809A49F3B2E4F067 /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		4E85B377CCC94C5D995AAA88 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		04BD12C5D8944C8DBBCFC1FF /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
		0D2D64FF67544EAE80542258 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */

2.代码展示

顾名思义，BottomTabNavigator是底部导航栏，包括图标展示的功能。MaterialTopTabNavigator是顶部导航栏，一般用于业内切换。这两个导航栏的使用方法基本和stackNavigator一样，只不过是在专用方面进行了特化，这里就仅展示以下代码，各位读者自己思考其中不同.下面是两个导航器的详细配置：

export const AppBottomTabNavigator = createBottomTabNavigator(
  {
    HomePage: {
      screen: HomePage,
      navigationOptions: {
        tabBarLabel: "最热",
        tabBarIcon: ({ tintColor, focused }) => {
          return (
            <Ionicons
              name={"ios-home"}
              size={26}
              style={{ color: tintColor }}
            />
          );
        }
      }
    },
    Page1: {
      screen: Page1,
      navigationOptions: {
        tabBarLabel: "趋势",
        tabBarIcon: ({ tintColor, focused }) => {
          console.log("tintColor:",tintColor);
          return (
            <Ionicons
              name={"ios-people"}
              size={26}
              style={{ color: tintColor }}
            />
          );
        }
      }
    },
    Page2: {
      screen: Page2,
      navigationOptions: {
        tabBarLabel: "收藏",
        tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons
            name={"ios-chatboxes"}
            size={26}
            style={{ color: tintColor }}
          />
        )
      }
    },
    Page3: {
      screen: Page3,
      navigationOptions: {
        tabBarLabel: "我的",
        tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons
            name={"ios-aperture"}
            size={26}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#e91e63"
    }
  }
);

在这里插入图片描述
2. MaterialTopTabNavigator

export const AppMaterialTopTabNavigator = createMaterialTopTabNavigator(
  {
    HomePage: {
      screen: HomePage,
      navigationOptions: {
        tabBarLabel: "最热"
      }
    },
    Page1: {
      screen: Page1,
      navigationOptions: {
        tabBarLabel: "趋势"
      }
    },
    Page2: {
      screen: Page2,
      navigationOptions: {
        tabBarLabel: "收藏"
      }
    },
    Page3: {
      screen: Page3,
      navigationOptions: {
        tabBarLabel: "我的"
      }
    }
  },
  {
    tabBarOptions: {
      // activeTintColor: Platform.OS === "ios" ? "#e91e63" : "#fff"
      tabStyle: { mindWidth: 50 },
      upperCaseLabel: false, //是否使标签大写,默认为true
      scrollEnabled: true, //是否支持 选项卡滚动，默认false
      style: {
        backgroundColor: "#678" //TabBar的背景色
      },
      //标识器的样式
      indicatorStyle: {
        height: 2,
        backgroundColor: "red"
      },
      labelStyle: {
        fontSize: 13,
        marginTop: 6,
        marginBottom: 6
      }
    }
  }
);

在这里插入图片描述
3. DrawerNavigator

export const AppDrawerNavigator = createDrawerNavigator(
  {
    Page4: {
      screen: Page4,
      navigationOptions: {
        drawerLabel: "Page4",
        drawerIcon: ({ tintColor }) => (
          <MaterialIcons
            name={"drafts"}
            size={24}
            style={{ color: tintColor }}
          />
        )
      }
    },
    Page5: {
      screen: Page5,
      navigationOptions: {
        drawerLabel: "Page5",
        drawerIcon: ({ tintColor }) => (
          <MaterialIcons
            name={"drafts"}
            size={24}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },
  {
    initialRouteName: "Page4",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    // 自定义侧边栏
    contentComponent: (props) => (
      <ScrollView style={{ backgroundColor: "#689", flex: 1 }}>
        <SafeAreaView forceInset={{top:"always",horizontal:"never"}}>
          <DrawerItems {...props}/>
        </SafeAreaView>
      </ScrollView>
    )
  }
);

3.后记

这一章主要介绍了BottomTabNavigator 和 MaterialBottomTabNavigator以及DrawerNavigator的基本使用方式，大家有特殊配置需求的可以参看代码展示中的配置文档。

天空之蓝钻
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
createMaterialBottomTabNavigator的使用
weixin_42262889的博客
06-23 818
参考链接：https://www.jianshu.com/p/21ce0c75a163 这个比createBottomTabNavigator更加cool，但是不属于react-navigation中的组件 需要安装react-native-vector-icons yarn add react-native-vector-icons react-native link react-native-...
createBottomTabNavigator开发指南
weixin_33672109的博客
12-30 1370
期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!! createBottomTabNavigator相当于iOS里面的TabBarController，屏幕下方的标签栏。如图： createBottomTabNavigator API createBottomTabNavigator(RouteConfigs,...
React Native导航栏系列（五）createbottomtabnavigator自定义图标实现TabBar
专注前端技术，包括Web端、移动端、小程序、APP
09-03 5299
在很多教程中，使用createbottomtabnavigator都是用的icon，需要各种引入组件，甚至还要修改配置文件。我觉得太麻烦了，就想不能使用自定义png图片吗？研究了一番之后，终于解决了这个问题，自己引入png图片作为TabBar的图标。 因为此教程是根据前面几篇一同写的，所用知识点能够相互融合，所以这里的TabBar必须要用与前面几篇文章相同的技术原理——页面栈！ 第一步，安装bottom-tabs（根据你电脑系统选择命令进行安装）： npm install @react-navigation
定制化你的ReactNative底部导航栏
weixin_33966365的博客
01-29 422
前言 ​ 接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件 createBottomTabNavigator createMaterialBottomTabNavigator 分别是这样的 尽管官方提供了导航栏的开箱即用方案,但是实际开发里面,我们会遇到各种各样的导航栏,各种各样的动效,所以以上可能无法满足我们的开发...
createMaterialBottomTabNavigator
yakelande的博客
11-09 1274
import React, {Component} from 'react'; import {createStackNavigator, createMaterialTopTabNavigator, Header} from 'react-navigation'; import {createMaterialBottomTabNavigator} from 'react-navigation...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
react-native-iap：应用内购买的react-native本机模块
02-03
此本地React模块将帮助您在Android ， iOS平台和Amazon平台（测试版）上访问手机的应用内购买功能。 请记住， react-native-iap将提供您需要的基本功能，但不是一站式解决方案，在您的应用中实施应用内购买仍需要...
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
react-native-qrcode-svg 基于react-native-svg和javascript-qrcode的React Native QR码生成器。 讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-...
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
react-native-pay-password:react-native 支付密码输入框
05-02
React本机支付密码English |安装$ npm install react-native-pay-password --save用法导出4个组件，如果PasswordInput或PasswordModal不满足您的需求，则应使用InputView和Keyboard进行尝试。PasswordInput（基于...
react-native-bottom-drawer:React Native组件以显示底部抽屉以及可滚动的消息列表
05-02
React Native的底部抽屉 内容 安装 步骤1 如果尚未安装 ，请安装它。 npm install react-native-vector-icons --save && react-native link react-native-vector-icons 第2步 安装react-native-bottom-drawer 。 npm install react-native-bottom-drawer --save 使用范例 import React , { Component } from 'react' ; import { Image , StatusBar , StyleSheet , View } from 'react-native' ; import Drawer , { Message } from 'react-native-bottom-
一个reactnative底部抽屉组件
08-10
一个 react native 底部抽屉组件
ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)
qq_37117521的博客
03-16 2267
持续更新噢~
ReactNative的Navigator和BottomTabNavigator使用
你微笑时很美ivan的博客
05-06 711
创建一个简单的项目，目录结构如下 index.js为App注册入口代码 import { AppRegistry, StyleSheet, Text, View } from 'react-native'; import InitApp from './InitApp' AppRegistry.registerComponent('MyReactNativeApp',...
react-native使用createBottomTabNavigator创建tabbar
achao_2020的博客
06-21 1501
使用的是官方推荐的react-navigation导航库,里面有一个方法叫createBottomTabNavigator,用于创建底部tabbar,下面说一下流程 1.首先安装: yarn add @react-navigation/native … 要装挺多个包的,因为有可能版本更新,依赖关系改变,我就不给大家写出来了,在官网上边看吧 2.在app.js中导入组件并使用 3.创建好组件,并导入相关依赖 NavigationContainer:用这个包裹你的应用程序,必须写不然报错 createBott
React Navigation导航器之createBottomTabNavigator实现APP首页底部导航的效果
one_four_two的博客
01-13 4768
文章目录语法参数说明RouteConfigsnavigationOptionsBottomTabNavigatorConfig示例App.jsHome.jsDetail.jsMy.js效果图 语法 语法 createBottomTabNavigator(RouteConfigs,BottomTabNavigatorConfig) 参数说明 RouteConfigs navigationO...
ReactNative学习第六天 项目底部TabBar和Icon自定义库
huyechao的博客
09-08 3234
昨天我们学了 项目Header+顶部滑动切换 今天刚开始的时候看到了一个库:react-native-vector-icons 自定义矢量图。我研究了一上午,但整体流程还跑不通,无奈先暂时放着,等以后再研究。这个库能适配不同机型,确实挺方便的。有兴趣的同学可以研究下。 http://www.jianshu.com/p/9016703cfe49 关于昨天提到的 r
[React Native]DrawerNavigator 抽屉组件
jameskaron的专栏
08-02 998
1.首先可以参考官方例子: https://reactnavigation.org/docs/en/drawer-based-navigation.html 这个是最简单的   这个是官方GitHub例子: https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayg...
react native 开发APP（四）页面导航, Tabbar, Navigation
chmod_R_755的专栏
04-04 1153
react native 页面跳转，Tabbar，Navigation 官网 https://reactnative.cn/ 项目下载地址：https://github.com/hebiao6446/DemoProject 陆续更新中。。。 1.先看效果，找一个演示的炮灰 我们至少可以看到两点 1） 目前大部分市场上的APP都是这种结构Tabbar栏+导航栏 2) 从闪屏页面（广告业）到进入A...
Material Top Tabs Navigator 加入按钮用于筛选
最新发布
05-27
要在Material Top Tabs Navigator中加入筛选按钮，你可以使用TabBar的右侧属性来添加一个按钮。在这个按钮上，你可以使用一个图标或者文字来表示筛选操作。当用户点击这个按钮时，你可以在页面上弹出一个模态框或者侧边栏来显示筛选选项。 下面是一个示例代码，展示了如何在Material Top Tabs Navigator中添加一个筛选按钮： ```dart class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), bottom: TabBar( controller: _tabController, tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], // 添加筛选按钮 actions: [ IconButton( icon: Icon(Icons.filter_list), onPressed: () { // 弹出筛选选项 // ... }, ), ], ), ), body: TabBarView( controller: _tabController, children: [ Center(child: Text('Tab 1')), Center(child: Text('Tab 2')), Center(child: Text('Tab 3')), ], ), ); } } ``` 在这个示例中，我们在TabBar的actions属性中添加了一个IconButton，用于表示筛选操作。当用户点击这个按钮时，我们可以在onPressed回调函数中弹出一个模态框或者侧边栏，来显示筛选选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值