React Native中TabBarIOS的简单使用方法示例
时间:2019-04-07
本文章向大家介绍React Native中TabBarIOS的简单使用方法示例,主要包括React Native中TabBarIOS的简单使用方法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧。
首先看一下效果图,如下图所示:
效果图
看完效果图再对代码进行说明.
import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, TouchableHighlight, Platform, } from 'react-native'; //首先导入需要的组件 import Home from './home'; import About from './about'; import Manager from './manager'; import Message from './message'; //这里是导入需要显示的页面 export default class Test extends Component { constructor(props){ super(props); this.state = { selectedTab:'home', data:'', isLoadingShow: false, title:'首页', }; } //设置一个初始化默认首先显示首页 componentDidMount() { console.log("++++++++++++++++TabBarIOS测试+++++++++++++++"); } _selectTab(tabName) { this.setState({ selectedTab: tabName }); } //修改底部Tab名称,通过状态进行控制 _selectTitle(title) { this.setState({ title: title }); } //修改顶部导航栏的名称,与Tab名称的修改是同步的 _addNavigator(component, title) { let data = null; if(title === '公告'){ data = this.state.data; } return <NavigatorIOS style={{flex:1}} barTintColor='#007AFF' titleTextColor="#fff" tintColor="#fff" translucent={false} initialRoute={{ component, title, passProps:{ data } }} />; } //这里定义了一个_addNavigator方法,接收两个参数页面名称与导航栏title _mainJudge(){ return( <View style={{flex:1}}> <TabBarIOS barTintColor="#FFF"> <TabBarIOS.Item icon={require('../imgs/phone_s.png')} title="首页" selected={this.state.selectedTab === 'home'} onPress={this._selectTab.bind(this, 'home')} > {this._addNavigator(Home, '首页')} </TabBarIOS.Item> <TabBarIOS.Item title="公告" icon={require('../imgs/gonggao.png')} selected={this.state.selectedTab === 'message'} onPress={this._selectTab.bind(this, 'message')} > {this._addNavigator(Message, '公告')} </TabBarIOS.Item> <TabBarIOS.Item title="管理" icon={require('../imgs/manager.png')} selected={this.state.selectedTab === 'manager'} onPress={this._selectTab.bind(this, 'manager')} > {this._addNavigator(Manager, '管理')} </TabBarIOS.Item> <TabBarIOS.Item title="关于" icon={require('../imgs/about.png')} selected={this.state.selectedTab === 'about'} onPress={this._selectTab.bind(this, 'about')} > {this._addNavigator(About, '关于')} </TabBarIOS.Item> </TabBarIOS> </View> ) } //_mainJudge方法是最核心的方法,用于对底部Tab以及顶部Title的布局,其中调用了几个方法上面已经做了说明. render() { return ( <View style={styles.container}> {this._mainJudge()} </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, opacity:1 }, });
如图所示,导入的import Manager from './manager';Manager页面的内容就会显示在页面,其余页面也是同样的道理.
页面填充效果图
通常进入这样一个页面都是从登陆页面跳转到此页面,或者作为一个子页面呈现.另一个好处就是,拿我的项目为例,点击修改密码,显示如下图所示:
内页效果图
你会看到管理会自动移到左边,title修改为修改密码.就避免了,每个页面都需要定义一个导航栏产生的冗余代码.
如果你想自己完成这样的效果,你只需新建一个项目,新增一个页面,将我的代码拷贝进去即可,注意:我import了四个页面,这个也需要你自己定义,可简单创建几个页面尝试.
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
- 五年换4高管,6000员工裁95%剩300人,王健林为何抛弃万达网科?
- Android Permission中英对照
- 你知道人脸识别技术是如何实现的吗?
- WordPress REST API 定制化输出
- ASP.NET MVC的Action Filter
- Android LayoutInflater详解
- 在Android中实现service动态更新UI界面
- VUE 入门基础(5)
- Android的UI设计与后台线程交互
- 更强悍的Silverlight: WCF RIA Services
- Java究竟该怎么学?文末有彩蛋!
- python-IDLE清屏和标记行数,其他推荐
- 从0到1:PostCSS 插件开发最佳实践
- VUE 入门基础(4)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法