reactNative底部导航菜单栏实现

最新推荐文章于 2022-08-29 11:23:23 发布
VIP文章 最新推荐文章于 2022-08-29 11:23:23 发布
阅读量7.5k 收藏 2
点赞数
分类专栏： reactNative 文章标签： reactNative 底部导航菜单栏实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kerryqpw/article/details/71036051
版权

reactNative底部导航菜单栏实现


          实现效果图：

         


       需要实现的效果： 点击下方最热、趋势、收藏、我的，相应的标签图标会变蓝色，App上方

      渲染相应的页面。

     

       实现思路：

       1、在项目中引入第三方reactNative插件  react-native-tab-navigator

           npm install react-native-tab-navigator -save

          该插件主要提供的功能是通过TabNavigator创建底部标签横向列表，管理TabNavigatorItem

         下载下来react-native-tab-navigator   查看源码

         TabNavigator.js   ：通过  TabNavigator.ite,=TabNavigator.Item   这句代码可以分析出，

          TabNavigator.Item是TabNavigator下属组件

           通过查看TabNavigator.Item的源码：

  static propTypes = {

最低0.47元/天 解锁文章
慕容屠苏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ReactNative底部导航栏（带消息圆点）
11-10
React Native：使用react-native-scrollable-tab-view库的ScrollableTabView实现了想要的功能（控制Tab页面的显示和隐藏、带消息圆点指示器）
react-native-webview 本地化加载Html
u014613941的博客
09-14 1585
1、创建一个bundle文件，将html的资源全部放进去如图：
react-native-navigation 实现底部导航栏布局（Android）
weixin_55510188的博客
08-29 1471
应用中的每个屏幕组件都必须使用唯一的名称进行注册，Navigation.registerComponent()。1、在react-native项目中安装react-native-navigation。2、 导航组件注册及配置文件src\navigation\index.js。RN 0.60 或更高版本，可以通过自动链接来执行必要的配置，运行。3、更改入口文件index.js。示例项目安装的模块的版本。...
React Native小白(超简单精致的底部导航栏):使用react-native-tab-navigator实现底部导航栏（二）
weixin_46043752的博客
06-18 331
实现效果如下：   点击顶部输入框按钮可以实现输入。 首先需要安装： npm install react-native-tab-navigator --save 然后在需要做导航栏的文件引入： import TabNavigator from 'react-native-tab-navigator'; 下面就可以编写顶部导航栏了，以下是完整代码： import React, { Component } from 'react' import { Image, Text, TextInpu
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
iMingzhen的博客
02-27 8242
快速上手react-navigation的使用以及利用UI Kitten的组件开发底部导航栏
RN：使用react-native-webview渲染h5页面、渲染html，并设置自适应高度
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-26 1212
安装 yarn add react-native-webview 渲染h5 import React, { Component } from 'react'; import { WebView } from 'react-native-webview'; class MyWeb extends Component { render() { return ( <WebView source={{ uri: 'https://infinite.red' }}
react实现底部固定菜单栏
Buddha_ITXiong的博客
06-01 8684
在项目中经常会碰到这种需求，底部固定的菜单栏目，本来是想直接用react-router-dom组件的navLink来实现的，因为navLink组件有个属性 activeClassName设置选中样式，默认值为active,通过这个直接给选中的当前页面添加一个选中的样式即可，但是因为我想在里面加入一个图标，这就涉及到图标也要切换了，捣鼓了一下也不知道怎么用navLink来实现，最后就只能自己来写了。...
ReactNative学习----2react-navigation实现App的底部菜单
翟浩浩Android专栏
03-15 364
官方文档： https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html 效果图： 项目结构： 安装模块： cd 到项目目录下 yarn add react[email protected] 源代码： BottomIndex 配置路由，Home1,Home2,Home3分别是一个页面 BottomIndex 代码： imp...
React Native自定义控件底部抽屉菜单的示例
08-28
本篇文章主要介绍了React Native自定义控件底部抽屉菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
reactnative底部导航栏
08-10
react-native底部导航栏，支持Android和iOS。
ReactNative自定义下拉菜单
05-25
自定义下拉菜单
React Native自定义标题栏组件的实现方法
08-31
今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实...对React Native自定义标题栏组件的实现方法感兴趣的朋友参考下
react native 实现底部导航栏
reg183的专栏
06-25 1125
引入这些依赖包缺一不可: "react-native-gesture-handler": "^1.10.3", "react-native-reanimated": "^2.2.0", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.4.0", "react-native-tab-view": "^3.0.1", "react-navigation": "^4.4.
React-Native底部导航栏实现
qq_38930850的博客
09-18 2571
版本环境：react-native：0.60.5 react-navigation：4.0 实现需要的第三方库如下： 通过命令行进行安装第三方库并连接 npm install react-navigation --save npm install react-navigation-tabs --save npm install react-navigation-stack --save npm...
React Native自定义控件【底部抽屉菜单】
...
06-26 6928
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 一、需求分析 原生开发中，自定义View可谓是屡见不鲜的事情，往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的View。关于自定义View的内容网上已经有很多的博文，本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必...
React Native 的顶部导航栏和底部导航栏目
铁柱的博客
09-11 7334
说来也是惭愧，本来关于底部导航栏，我已经写过一篇博客，只不过那篇更偏向于入门一些，当时一实现功能之后就迫不及待的分享给大家了。地址在这儿：http://blog.csdn.net/LJFPHP/article/details/77888439，后来随着项目的逐渐深入，也慢慢对代码有了一定的优化，然后发现了更好的导航栏目的实现，在此分享给大家。      这边利用的主要组件是react-navigat
ReactNative学习实例（八） 第三方组件TabNavigator底部导航栏
热门推荐
zhang___yong的博客
04-05 1万+
TabNavigator是github上开源的一个rn组件，是适用于ios和安卓两个平台的底部导航栏。 组件地址：https://github.com/expo/react-native-tab-navigator 1.首先通过命令行将组件引入项目： 进入项目根目录并执行npm install react-native-tab-navigator --save执行完毕后组件就已导入，
WebStorm设置JSX
kerryqpw的博客
04-01 9693
WebStorm设置JSX
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` 的文档以获取更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值