3.1 View组件
React Native中的View就相当于web开发容器中的div
3.1.1 View介绍
View是一个容器,支持flexbox布局,可以进行复杂布局
3.1.2 案例:九宫格的实现
现在我们实现携程的客户端首页实例,其web app地址是http://m.ctrip.com,下面我们实现酒店这一栏布局
实现:
- 加载View组件,在index.ios.js中引入react-native并加载View
- 创建组件:使用
var app = React.createClass
- 添加样式:使用
var styles=StyleSheet.create({})
- 注册入口
- 布局
全部实现代码index.ios.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} = React;
var app = React.createClass({
render:function(){
return (
<View style={styles.flex}>
<View style={styles.container}>
<View style={[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item,styles.lineLeftRight]}>
<View style={[styles.flex,styles.center,styles.lineCenter]}>
<Text style={styles.font}>海外酒店</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>特惠酒店</Text>
</View>
</View>
<View style={styles.item}>
<View style={[styles.flex,styles.center,styles.lineCenter]}>
<Text style={styles.font}>团购</Text>
</View>
<View style={[styles.flex,styles.center]}>
<Text style={styles.font}>客栈.公寓</Text>
</View>
</View>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container:{
// flex:1, // flex 代表权重,为1表示该元素就会把伸缩容器的剩余空间占满
borderWidth:1,
// borderColor:'red',
flexDirection:'row',// 默认是行排column(从上到下),现在设置为row(从左到右)
marginTop:25,
marginLeft:5,
marginRight:5,
padding:2,
borderRadius:5,
backgroundColor:'#FF0067',
},
item:{
flex:1,
height:80,
borderColor:'blue',
borderWidth:1
},
center:{
justifyContent:'center',// 垂直居中,实际上是按照flexDirection方向居中
alignItems:'center' // 水平居中
},
flex:{
flex:1
},
font:{
color:'#fff',
fontSize:16,
fontWeight:'bold'
},
lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),
borderRightWidth:1/PixelRatio.get(),
borderColor:'#fff'
},
lineCenter:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#fff'
}
});
AppRegistry.registerComponent('Hello', () => app);
- 引入了PixelRatio API,PixelRatio的get方法用于获取高清设备的像素比,使用1/PixelRatio.get()就可以获得最小线宽。
- container使用了margin属性
- 设置了字体
- 另一个要注意的是React.createClass中的render方法需要返回一个JSX对象(包含null),并且该对象只能包含在一个节点中,也就是说,返回的对象必须有且只有一个容器对象包裹,后面会补全render方法。
3.2 Text组件
Text组件主要用于显示文本,该特性表现为被触摸是否高亮,它同样支持多层嵌套,所以可以继承样式。
3.2.1 Text组件介绍
Text组件常用特性如下所示:
- onPress:该属性的值是一个函数,支持按下事件(即手指触摸事件),当手指按下的时候执行该函数
- numberOfLines:该属性的值是一个数字,用于规定最多显示多少行,如果超过该数值,则以省略号表示。。。。
- onLayout:该属性的值是一个函数,用于获取该元素布局的位置和大小,例如:
{"target":4,"layout":{"y":10,"width":300,"x":10,"height":117}}
,一般事件函数的形式是function(e){console.log(e.nativelEvent)},这样就可以打印事件的参数。
3.2.2 案例:网易新闻列表展示
首先,我们来分析该页面的结构,这个页面的布局的比较简单,分为上、中、下三栏布局。
1、封装头部组件:封装成一个header.js文件
var Header = React.createClass({
render: function(){
return (
<View style={styles.flex}>
<Text style={styles.font}>
<Text style={styles.font_1}>網易</Text>
<Text style={styles.font_2}>新闻</Text>
<Text>有态度°</Text>
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
flex:{
marginTop:25,
height:50,
borderBottomWidth:3/React.PixelRatio.get(),
borderBottomColor:'#EF2D36',
alignItems:'center' /* 使Text组件水平居中*/
},
font:{
fontSize:25,
fontWeight: 'bold',
textAlign:'center' /*使文字在Text组件中居中*/
},
font_1:{
color:'#CD1D1C'
},
font_2:{
color:'#FFF',
backgroundColor:'#CD1D1C',
}
});
module.exports = Header;
我们分析一下上面的代码,在代码最后我们将其export成独立的模块,在上面的代码中我们发现,Text组件嵌套之后就不会按照flexbox布局,这也符合我们的初粽,我们在最外层的Text组件定义了font样式,即规定了该Text组件内部的所有Text组件都是25pt,字体加粗并居中显示。同时为了对第一个和第二个Text组件做一些特别的处理,我们给它们加上了font_1和font_2样式,下面我们在index.ios.js中加载header.js文件中的Header组件
var Header = require('./header');
2、封装列表和今日要闻组件的代码:
var React = require('react-native');
var Header = require('./header');
var {
AppRegistry,
StyleSheet,
View,
Text
} = React;
var List = React.createClass({
render: function(){
return (
<View style={styles.list_item}>
<Text style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
});
var ImportantNews = React.createClass({
show: function(title){
alert(title);
},
render: function(){
var news = [];
for(var i in this.props.news){
var text = (
<Text
onPress={this.show.bind(this, this.props.news[i])}
numberOfLines={2}
style={styles.news_item}>
{this.props.news[i]}
</Text>
);
news.push(text);
}
return (
<View style={styles.flex}>
<Text style={styles.news_title}>今日要闻</Text>
{news}
</View>
);
}
});
var app = React.createClass({
render: function(){
var news = [
'1、刘慈欣《三体》获“雨果奖”为中国作家首次',
'2、京津冀协同发展定位明确:北京无经济中心表述',
'3、好奇宝宝第一次淋雨,父亲用镜头记录了下来',
'4、京津冀协同发展定位明确::北京无经济中心表述+好奇宝宝第一次淋雨,父亲用镜头记录了下来'
];
return (
<View style={styles.flex}>
<Header></Header>
<List title='宇航员在太空宣布“三体”获奖'></List>
<List title='NASA发短片纪念火星征程50年'></List>
<List title='男生连续做一周苦瓜吃吐女友'></List>
<List title='女童遭鲨鱼袭击又下海救伙伴'></List>
<ImportantNews news={news}></ImportantNews>
</View>
);
}
});
var styles = StyleSheet.create({
flex:{
flex:1
},
list_item:{
height:40,
marginLeft:10,
marginRight:10,
borderBottomWidth:1,
borderBottomColor: '#ddd',
justifyContent: 'center'
},
list_item_font:{
fontSize:16
},
news_title:{
fontSize:20,
fontWeight:'bold',
color: '#CD1D1C',
marginLeft:10,
marginTop:15,
},
news_item:{
marginLeft:10,
marginRight:10,
fontSize:15,
lineHeight:20,
}
});
AppRegistry.registerComponent('APP', () => app);
在上面的代码中,我们给Text组件增加了onPress事件,这里,当新闻被按下的时候,会弹出新闻的标题,需要注意的是,这里面传参数时需要使用bind方法,该方法的第一个参数是上下文对象,第二个参数是传递参数;同时需要使用numberOfLines指定标题最多两行,此外,我们使用this.props获取传递的数据。
3.3 NavigatorIOS组件
是用来实现一个视图之间的切换和前进、后退。它就是NavigatorIOS组件,当然React Native也提供了一个兄弟组件,那就是Navigator
3.3.1 NavigatorIOS组件
该组件本质上是对UIKit navigation的包装,也就是说,使用NavigatorIOS进行路由切换、实质上是调用了UIKit的navigation。
路由是一个JavaScript对象,代表着一个页面或者说是视频组件,NavigatorIOS组件默认的路由提供了initialRoute属性,示例代码如下:
render:function(){
return(
<NavigatorIOS
initialRoute={{
component:MyView,
title:'My View Title',
passProps:{myProp:'foo'},
}}
/>
);
}
在上面的代码中,component表示该页面需要加载的组件视图,title表示需要在头部显示的标题,passProps用于页面间传递数据。
这里面简单介绍一下NavigatorIOS组件的属性,具体如下所示:
- barTintColor:导航条的背景颜色。
- initialRoute:初始化路由。路由对象如下所示:
{
component:function,// 加载的视图组件
title:strng, // 当前视图的标题
passProps:object,// 传递的数据
backButtonIcon:Image.propTypes.source,后退按钮图标
backButtonTitle:string,// 后退按钮标题
leftButtonIcon:Image.propTypes.source,// 左边按钮图标
leftButtonTitle:string// 左边按钮标题
onLeftButtonPress:function,// 左边按钮点击事件
rightButtonIcon:Image.propTypes.source,// 右边按钮图标
rightButtonTitle:string,// 右边按钮标题
onRightButtonPress:function,// 右边按钮点击事件
wrapperStyle:[object object] // 包裹样式
}
- itemWrapperStyle:为每一项定制样式,例如设置每个页面的背景颜色。
- navigationBarHidden:当其值为true时,隐藏导航栏。
- shadowHidden:是否隐藏阴影,其值为true或者false。
- tintColor:导航栏上按钮的颜色设置。
- titleTextColor:导航栏上的字体的颜色。
- transLucent:导航栏是否是半透明的,其傎为true或者是false,
在组件视图切换的时候,navigator会作为一个属性对象被传递,我们可以通过this.props.navigator获取navigator对象。navigator是一个十分重要的对象,它可以控制路由的跳转和组件的加载,因此,掌握navigatorIOS组件,必须要掌握navigator对象,navigator对象的主要方法如下: - push(route):加载一个新的页面(视图或者路由)并且路由到该页面
- pop();返回到上一个页面
- popN(n):一次性返回N个页面,当N=1时,即相当于pop()方法的效果。
- replace(route):替换当前的路由。
- replacePrevious(route):替换前一个页面的视图并且回退过去。
- resetTo(route):取代最顶层的路由并且回退过去。
- popToTop();回到最上层视频。
3.2.2 案例:列表页跳转详情页
直接替换index.ios.js
var React = require('react-native');
var {
StyleSheet,
NavigatorIOS,
Text,
AppRegistry,
View,
ScrollView,
} = React;
var List = React.createClass({
render: function(){
return (
<ScrollView style={styles.flex}>
<Text style={styles.list_item} onPress={this.goTo}>☆ 豪华邮轮济州岛3日游</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 豪华邮轮台湾3日游</Text>
<Text style={styles.list_item} onPress={this.goTo}>☆ 豪华邮轮地中海8日游</Text>
</ScrollView>
);
},
goTo: function(){
this.props.navigator.push({
component: Detail,
title: '邮轮详情',
rightButtonTitle: '购物车',
onRightButtonPress: function(){
alert('进入我的购物车');
}
});
}
});
var Detail = React.createClass({
render: function(){
return (
<ScrollView>
<Text>详情页</Text>
<Text>尽管信息很少,但这就是详情页</Text>
</ScrollView>
);
}
});
var NV = React.createClass({
render: function(){
return(
<NavigatorIOS
style={{flex:1}}
initialRoute={{
component: List,
title: '邮轮',
passProps: {},
}}
/>
);
}
});
var styles = StyleSheet.create({
flex:{
flex: 1,
},
list_item:{
lineHeight:25,
fontSize:16,
marginLeft:10,
marginRight:10
}
});
AppRegistry.registerComponent('APP', () => NV);
上面的代码分析,现在,我们清楚地知道NV组件调用List组件,List组件调用Detail组件,它们之间形成链式关系,所有的路由都被navigator.push到一个路由数组中,navigator对象对路由进行控制和跳转
3.4 TextInput组件
输入框必不可少,例如自动校验、占位符以及指定弹出不同的键盘类型等。
3.4.1TextInput组件介绍
主要属性和事件如下:
- autoCapitalize:枚举类型,可选值有’none’,’sentences’,’words’,’characters’,当用户输入时,用于提示。]
- placeholder:占位符,在输入前显示的文本内容。
- value:文本输入框的默认值。
- placeholderTextColor:占位符文本的颜色
- password:如果为true,则是密码输入框
- multiline:如果为true,表示多行输入。
- editable:如果为false,文本框不可输入。其默认值是true,
- autoFocus:如果为true,将自动聚焦
- clearButtonMode枚举类型,可选有never,while-editing,unless-editing,always 用于显示清除按钮。
- maxLength:能够输入的最长字符数。
- enablesReturnKeyAutomatically:如果值为true,表示没有文本时键盘是不能有返回键的。其默认值为false。
- returnKeyType:枚举类型,值有default、go、google、join,nex,route,search,send,yahoo,done,emergency-call,表示软键盘返回键显示的字符串,
- secureTextEntry:如果为true,则像密码框一样隐藏输入内容,默认为false
- onChangeText:当文本输入框的内容变化时,调用该函数,onChangeText接收一个文本的参数对象。
- onChange:当文本变化时,调用该函数
- onEndEditing:当结束编辑时,调用该函数。
- onBlur:失去焦点触发事件。
- onFocus:获取焦点触发事件。
- onSubmitEditing:当结束编辑后,点击键盘的提交按钮触发事件。
3.4.2 按钮:搜索自动提示:
待更新….