博客
关于我
ReactNative--在Android上使用TabNavigator实现页面导航
阅读量:558 次
发布时间:2019-03-09

本文共 2720 字,大约阅读时间需要 9 分钟。

React Native默认提供了TabBarIOS组件用于提供视图切换功能,但这个组件是不能跨平台的,如果希望在Android平台上实现TabBar功能需要自己使用第三方js库,我在GitHub上找到了一个组件用于安卓上的TabBar实现。它的效果如下:

        

        首先需要安装组件到你的项目中,在你的项目所在文件夹通过命令行执行:

    npm install react-native-tab-navigator --save

        接着在项目头引入该组件:

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

        最后在你的视图中通过标签<TabNavigator>来使用该组件,在<TabNavigator.Item>标签内渲染每个标签页。

<TabNavigator>常用的属性有:

  • sceneStyle:定义视图区域的样式
  • tabBarStyle:定义底部标签栏的样式
  • tabBarShadowStyle:定义底部标签栏阴影样式

   例如要隐藏底部标签栏:

<TabNavigator.Item>常用属性有:

  • title:定义图标底部显示的文字
  • badgeText:定义图标右上角显示的角标
  • selected:为true时代表当前页面被选中。通过与this.state.selectedTab进行比较来判断当前页是否被选中。
  • renderIcon:定义图标的渲染方法。
  • renderSelectedIcon:定义图标被激活时的渲染方法。如果不指定,默认渲染为蓝色背景。
  • onPress:点击触发的函数。一般当点击时调用setState方法修改state中selectedTab来切换当前被选中的页面。

例如:

} renderSelectedIcon={()=>
} onPress={()=>{this.setState({selectedTab:'home'})}} >
首页

 

完整的代码如下:

/*TabNavigatorDemo*/import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View,  Image,} from 'react-native';import TabNavigator from 'react-native-tab-navigator';export default class App extends Component{  constructor(props){    super(props);    this.state={      selectedTab:'home'    }  }  render(){    return(      
TabNavigator组件
} renderSelectedIcon={()=>
} onPress={()=>{this.setState({selectedTab:'home'})}} >
首页
} renderSelectedIcon={()=>
} onPress={()=>{this.setState({selectedTab:'category'})}} >
分类详情
} renderSelectedIcon={()=>
} onPress={()=>{this.setState({selectedTab:'find'})}} >
发现更多
} onPress={()=>{this.setState({selectedTab:'mine'})}} >
我的空间
) }}const styles=StyleSheet.create({ container:{ flex: 1, backgroundColor: '#F5FCFF', }, header:{ height:50, backgroundColor:'#bcfffd', justifyContent:'center', alignItems:'center' }, pageView:{ flex:1, justifyContent:'center', alignItems:'center' }, iconImg:{ width:25, height:25 }, iconActive:{ width:35, height:35 }});
你可能感兴趣的文章
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>
Mysql中视图的使用以及常见运算符的使用示例和优先级
查看>>
Mysql中触发器的使用示例
查看>>
Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
查看>>
mysql中还有窗口函数?这是什么东西?
查看>>
mysql中间件
查看>>
MYSQL中频繁的乱码问题终极解决
查看>>
MySQL为Null会导致5个问题,个个致命!
查看>>
MySQL为什么不建议使用delete删除数据?
查看>>
MySQL主从、环境搭建、主从配制
查看>>
Mysql主从不同步
查看>>