博客
关于我
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 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>