createMaterialBottomTabNavigator的使用

最新推荐文章于 2023-03-16 16:06:54 发布
最新推荐文章于 2023-03-16 16:06:54 发布
阅读量875 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42262889/article/details/93378648
博客介绍了比createBottomTabNavigator更酷的组件，它不属于react-navigation，需安装react-native-vector-icons。还给出了安装命令及引用createMaterialBottomTabNavigator的代码示例，同时提到使用react-native-paper的BottomNavigation组件的库，且无需担心包含整个react-native-paper。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考链接：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-vector-icons or react-native link

1.yarn add react-navigation-material-bottom-tabs react-native-paper
2.yarn add react-native-vector-icons
``

imprt {createMaterialBottomTabNavigator} from ‘react-navigation-material-bottom-tabs’;
createMaterialBottomTabNavigator(
RouteConfig,
MaterialBottomTabNavigatorConfig,
);

使用 react-native-paper 的 BottomNavigation 组件的一个库，
它不包括整个 react-native-paper ， 所以你不需要担心它


最好使用CreateBottomTabNavigator
signlesun
关注
React Navigation导航器之createBottomTabNavigator实现APP首页底部导航的效果
one_four_two的博客
01-13 5069
文章目录语法参数说明RouteConfigsnavigationOptionsBottomTabNavigatorConfig示例App.jsHome.jsDetail.jsMy.js效果图 语法 语法 createBottomTabNavigator(RouteConfigs,BottomTabNavigatorConfig) 参数说明 RouteConfigs navigationO...
createBottomTabNavigator开发指南
weixin_33672109的博客
12-30 1399
期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!! createBottomTabNavigator相当于iOS里面的TabBarController，屏幕下方的标签栏。如图： createBottomTabNavigator API createBottomTabNavigator(RouteConfigs,...
createMaterialBottomTabNavigator
yakelande的博客
11-09 1324
import React, {Component} from 'react'; import {createStackNavigator, createMaterialTopTabNavigator, Header} from 'react-navigation'; import {createMaterialBottomTabNavigator} from 'react-navigation...
React Navigation2.0配置createBottomTabNavigator
hahahhahahahha123456的博客
03-09 311
// In App.js in a new project import React,{ Component } from 'react'; import { View, Text ,StyleSheet,Image} from 'react-native'; import { createStackNavigator,createBottomTabNavigator } from 'rea...
自学React-native （第四天）-- BottomTabNavigator 和 MaterialBottomTabNavigator、DrawerNavigator导航
huangssssx的专栏
02-22 522
自学React-native （第三天）-- BottomTabNavigator导航 1.前言： 由于使用了下边栏图标，所以安装了react-native-vector-icons,由于rnvi组件带有自己的ios/android代码所以需要使用命令：react-native link react-native-vector-icons将原生资源引入到本地项目中。影响到的地方: android...
使用React Native进行用户认证与权限控制
React Native是Facebook推出的一款开源移动应用框架，可以使用JavaScript和React编写原生移动应用。它允许开发人员使用相同的代码库来创建iOS和Android应用，极大地提高了开发效率和代码复用率。 ## 1.2 用户认证与...
react-native Text中tabLabel红了 ts写法
06-02
在 Native中，使用TypeScript编写带有Tab导航的组件可以使用`createBottomTabNavigator`或`createMaterialBottomTabNavigator`函数来创建。如果你想在底部Tab导航中设置标签的文本和图标，可以使用`tabBarLabel`和`...
expo的底部导航栏组件
最新发布
03-20
接着配置导航器，使用createMaterialBottomTabNavigator来创建底部导航栏，并设置图标和标签。 需要确保代码示例正确，比如导入正确的组件，使用createAppContainer包裹导航器。同时，提醒用户注意版本兼容性和图标...
ReactNative——导航器createBottomTabNavigator(底部标签导航器篇)
qq_37117521的博客
03-16 3009
持续更新噢~
React-Navigation V2 使用教程 (二) createBottomTabNavigator
热门推荐
卓原的进化之旅
07-05 1万+
使用 import { createBottomTabNavigator } from 'react-navigation'; 示例 继续使用我们上节的代码，如果没有，可以重新建立两个页面文件HomeScreen,DetailsScreen /** * Created by 卓原 on 2018/7/4. * */ import {createStackNavigator, c...
RN导航02——createBottomTabNavigator结合StackNavigator使用
zcmain的专栏
04-04 3699
RN提供导航组件‘react-navigation’中的底部导航createBottomTabNavigator使用如下： Step1:创建createBottomTabNavigator组件BottomNavigatorComponent.js import {createAppContainer, createBottomTabNavigator} from 'react-navigat...
炫酷的底部导航控件——BottomNavigationBar
事情往往烟消云散
08-19 9655
今天闲来无事，跟朋友一起探讨技术，不觉之间发现了一个很好用的控件，于是乎拿来和大家分享，略显粗糙，海景大家见谅，想知道更多技术类文章，请关注我的博客，小编会在不定时更新博客今天带来的一款控件是我们经藏用到的，那就是底部导航控件，大家可能会说这很简单，因为我们可以用Radiobutton+Fragment来实现，也可以TabLayout+ViewPager+Fragment来实现，但是今天呢，小编带来
React Navigation的‘createBottomTabNavigator()‘ has been moved to ‘react-navigation-tabs‘
向着太阳迎着光
04-21 980
错误日志： ‘createBottomTabNavigator()’ has been moved to ‘react-navigation-tabs’ 如下图所示： 待解决：
react-native使用createBottomTabNavigator创建tabbar
achao_2020的博客
06-21 1665
使用的是官方推荐的react-navigation导航库,里面有一个方法叫createBottomTabNavigator,用于创建底部tabbar,下面说一下流程 1.首先安装: yarn add @react-navigation/native … 要装挺多个包的,因为有可能版本更新,依赖关系改变,我就不给大家写出来了,在官网上边看吧 2.在app.js中导入组件并使用 3.创建好组件,并导入相关依赖 NavigationContainer:用这个包裹你的应用程序,必须写不然报错 createBott
react-native 创建底部导航
qq_46138622的博客
05-23 459
react-native 创建底部导航 使用createBottomTabNavigator 安装依赖 根据官方文档的提示,需要确保有:"@react-navigation/native"及其依赖项和@react-navigation/material-bottom-tabs" 以下是我的： "dependencies": { "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tab
createBottomTabNavigator + createMaterialTopTabNavigator精讲
m0_38066007的博客
05-15 784
################################################################################################# createMaterialTopTabNavigator API createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig...
react-native系列(15)导航篇：底部导航TabNavigator参数及使用详解
@黄小泽的个人博客
03-09 3609
本篇主要介绍的是TabNavigator，假设你已经对它的用法已经有了基本的认识，或重新去官网看一下 官网地址：https://reactnavigation.org/zh-Hans/ 底部导航TabNavigator的效果类似于微信，效果图： TabNavigator生成的底部导航的结构，它包括4部分： 选项卡栏 选项卡 图标 标签文本 createBottomTabNav...
React Navigation（七）-createTabNavigator(API)
u010418640的博客
06-20 3812
原文链接createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)RouteConfigsDrawerNavigatorConfig
底部导航，BottomNavigationBar
weiyangmeng的博客
05-24 508
依赖：compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'布局：<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值