<< 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 按钮:搜索自动提示:
待更新….