博客
关于我
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添加用户并授予只能查询权限
查看>>
mysql添加用户权限报1064 - You have an error in your SQL syntax问题解决
查看>>
mysql添加索引
查看>>
mysql添加表注释、字段注释、查看与修改注释
查看>>
mysql清理undo线程_MySQL后台线程的清理工作
查看>>
mysql清空带外键的表
查看>>
MySQL清空表数据
查看>>
mysql源码安装
查看>>
Mysql源码安装过程中可能碰到的问题
查看>>
MySQL灵魂16问,你能撑到第几问?
查看>>
MySQL灵魂拷问:36题带你面试通关
查看>>
mysql状态分析之show global status
查看>>
mysql状态查看 QPS/TPS/缓存命中率查看
查看>>
mysql生成树形数据_mysql 实现树形的遍历
查看>>
mysql用于检索的关键字_Mysql全文搜索match...against的用法
查看>>
MySQL用得好好的,为什么要转ES?
查看>>
MySql用户以及权限的管理。
查看>>
MySQL用户权限配置:精细控制和远程访问的艺术!------文章最后有惊喜哦。
查看>>
mysql用户管理、常用语句、数据分备份恢复
查看>>
MySQL留疑问:left join时选on还是where?
查看>>