TabBarIOS
参考:
http://blog.csdn.net/wmmhwj/article/details/68483592 import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
ScrollView,
TabBarIOS } from 'react-native'; /*
* 在React Native 实现页面切换,提供两个组件: TabBarIOS 和TabBarIOS.Item
*
* 常用属性:
* selected: 是否选中了某个Tab
* title 标题
* barTintColor Tab栏的背景颜色
* icon 图标
* onPress 点击事件,当某个tab被选中时,需要改变组件的selected={true}设置
* 切换原理:点击tab时触发onPress方法,记录被点击tab的title,在通过title设置tab是否被选中(从而设置selected值 true/false)
*
*
* */ /*
*
* 导入textInput.js
* 导入loadimage.js
* 导入movieList.js movie.json
*
* */
var Page1 = require("./textInput");
var Page2 = require("./loadimage");
var Page3 = require("./movieList"); var LessionTabBarIOS = React.createClass({ getInitialState:function () {
return{
//用于记录显示的页面组件的title
tab:"Page1"//默认的
}
},
//TabBarIOS.Item 的onPress处理方法
select:function (tabName) {
this.setState({
tab:tabName
}) }, render:function () {
return(
<TabBarIOS style={{flex:1}}>
<TabBarIOS.Item
title="Page1"
icon={require("image!image1")}//图片直接放在了xcode的.asset 中
onPress={this.select.bind(this,"Page1")}
selected={this.state.tab==="Page1"}
>
{/*//页面组件*/}
<Page1></Page1>
</TabBarIOS.Item>
<TabBarIOS.Item
title="Page2"
//使用系统的图片
systemIcon="bookmarks"
onPress={this.select.bind(this,"Page2")}
selected={this.state.tab==="Page2"}
>
{/*//页面组件*/}
<Page2></Page2>
</TabBarIOS.Item>
<TabBarIOS.Item
title="Page3"
icon={require("image!image3")}//图片直接放在了xcode的.asset 中
onPress={this.select.bind(this,"Page3")}
selected={this.state.tab==="Page3"}
>
{/*//页面组件*/}
<Page3></Page3>
</TabBarIOS.Item>
</TabBarIOS>
);
} });
//////////-------ES6 语法-----////////////////////////////////////////////////////////////////////////////////////
/*导入组件*/ import OnePage from "./OnePage"
import TwoPage from "./TwoPage" class ThreePage extends Component{
render(){
return(
<View style={{backgroundColor:"red", flex:1}}>
<Text>hello</Text>
</View>
)
}
} export default class App extends Component<{}> {
constructor(props){
super(props);
this.state={
tab:"One"
}
//注意:需要通过 bind() 来指定 this, 否则指定不明确,无法调用函数 or 也可以在调用的时候直接绑定
this.select = this.select.bind(this) }
select(tabTitle){
this.setState({
tab:tabTitle
})
} render() {
return (
<TabBarIOS style={{flex:1,alignItems:"flex-end"}}
> <TabBarIOS.Item
title="Three"
icon={require('./活动.png')}
onPress={this.select.bind(this,'One')} //调用的时候,直接绑定, 并传参数
seleted={this.state.tab==="Three"}> <View style={{backgroundColor:"red"}}>
<Text>Hello</Text>
</View> </TabBarIOS.Item> <TabBarIOS.Item title="Two" systemIcon="bookmarks" onPress={this.select} seleted={this.state.tab==="Two"}>
<TwoPage></TwoPage>
</TabBarIOS.Item> </TabBarIOS>
);
}
}
注意: 有时,tabBar已经显示, 而页面没有渲染出来, 检查页面的布局 flex:1
TabBarIOS的更多相关文章
- React Native 之TabBarIOS
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native组件之ScrollView 和 StatusBar和TabBarIos
React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https: ...
- React-Native 之 TabBarIOS
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 的组件之底部导航栏 TabBarIOS(一)
import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, TabBarIOS, } fro ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- ReactNative: 使用标签栏组件TabBarIOS组件
一.简介 标签栏Tab的作用对于应用程序那是不言而喻的,它是应用程序中除了导航栏组件外的又一个核心组件,使用它可以实现页面的切换.RN提供了一个TabBarIOS组件来完成页面的切换(视图或者路由), ...
- React Native组件介绍
1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...
- react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧! 1. 首先打开terminal进入到我们的工程文件夹下, ...
- React Native之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- 初学者教程之命名空间,范围解析及LEDB规则
2014年5月12日 Sebastian Raschka编写 这是一篇关于采用LEGB规则实现Python变量命名空间及范围解析的简短教程.下面章节将会提供简短的可以说明问题的示例代码块来简要阐述问题 ...
- 第一次用FontLad~
FontLad 是一款制作字体的工具 使用流程: 1. 下载.安装软件FontLab Studio2. File->New菜单,创建一个工程文件,会自动创建一个ASCII码表对应的字体表3. ...
- AID-应用标识符的组成规则
AID:即唯一标识一个应用,分为两部分,RID(5字节)+PIX(最多11字节) RID:注册标识符,由ISO组织来分配,标识一个全球唯一的应用提供商,一般是分配给卡组织,比如分配给Master,比如 ...
- sql 两大类 DDL数据定义语言 和DCL数据控制语言
SQL分为五大类: DDL:数据定义语言 DCL:数据控制语言 DML:数据的操纵语言 DTL:数据事务语言 DQL:数据查询语言. DDL (date definition lang ...
- 关于innerHTML以及html2dom
使用innerHTML或者insertAdjacentHTML 创建元素的时候能给我们带来很大的方便,为domNode 赋予innerHTML 属性,在插入大量的HTML的时候,使用innerHTML ...
- 关于iReport中纸张的大小 换算
在iReprot里中进行报表设计时 第一步先确定纸张的大小 如A4纸 直接选就行了 A2 A3一样的,但还会在这种情况这种纸没有选择的怎么办? 比如 那种代小孔的纸 279*241m ...
- JAVA并发设计模式学习笔记(二)—— Single Threaded Execution Pattern
注:本文的主要参考资料为结城浩所著<JAVA多线程设计模式>. 单线程执行模式(Single Threaded Execution Pattern)是最简单的多线程设计模式,几乎所有其他的 ...
- Dubbo RPC源码解读
https://yq.aliyun.com/articles/272405#27 本文代码摘录的时候,将一些与本流程无关的内容去掉了,如有需要请看源码. 一.闲言碎语 使用rpc框架已经多年了,虽然之 ...
- java-设计模式汇总整理
最近,对各种模式做了一个整理,便于后续自用. 1.工厂模式 总结:很好理解,一个接口,2个类实现这个接口,那么可以用“接口 变量=new 接口实现类”的方式调用不同的实现类,调用方式直接使用接口的方法 ...
- duilib入门简明教程 -- 完整的自绘标题栏(8)
看了前面那么多教程,相信对duilib已有基本映像了,我们就快马加鞭,做出一个完整的自绘标题栏吧~ 看到下面这个效果图,小伙伴们是不是有点惊呆了呢~O(∩_∩)O~ duil ...