博客
关于我
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 幻读(Phantom Problem)不可重复读
查看>>
mysql 往字段后面加字符串
查看>>
mysql 快照读 幻读_innodb当前读 与 快照读 and rr级别是否真正避免了幻读
查看>>
MySQL 快速创建千万级测试数据
查看>>
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
MySql 手动执行主从备份
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>