<< React Native 入门与实战>>----第3章 常用组件及实战
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 按钮:搜索自动提示:
待更新….