ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏

本文介绍了如何在ReactNative项目中使用TabNavigator组件创建底部导航栏。通过命令行引入组件后,在JS文件中配置使用,包括设置title、renderIcon、onPress等属性,实现底部导航的功能。注意,TabNavigator的底部高度会自适应图标和文字,若需调整,可通过tabBarStyle属性定制。

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

TabNavigator是github上开源的一个rn组件,是适用于ios和安卓两个平台的底部导航栏。

组件地址:https://github.com/expo/react-native-tab-navigator


1.首先通过命令行将组件引入项目:

进入项目根目录并执行

npm install react-native-tab-navigator --save
执行完毕后组件就已导入,可以在根目录下的package.json的依赖中找到:
"dependencies": {
    "react": "15.3.2",
    "react-native": "0.37.0",
    "react-native-tab-navigator": "^0.3.3"
  },

然后在js文件中引入:

import TabNavigator from 'react-native-tab-navigator';

2.使用方法:

先看代码:

<TabNavigator
                    tabBarStyle={
  {height:60}}
                    style={
  {flex:1}}>
                    <TabNavigator.Item
  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值