diff --git a/react_native/3_1.png b/react_native/3_1.png
new file mode 100644
index 0000000..0ba01bd
Binary files /dev/null and b/react_native/3_1.png differ
diff --git a/react_native/3_10.png b/react_native/3_10.png
new file mode 100644
index 0000000..a9f05ec
Binary files /dev/null and b/react_native/3_10.png differ
diff --git a/react_native/3_11.png b/react_native/3_11.png
new file mode 100644
index 0000000..f360c86
Binary files /dev/null and b/react_native/3_11.png differ
diff --git a/react_native/3_2.png b/react_native/3_2.png
new file mode 100644
index 0000000..c65eb54
Binary files /dev/null and b/react_native/3_2.png differ
diff --git a/react_native/3_3.png b/react_native/3_3.png
new file mode 100644
index 0000000..172af4e
Binary files /dev/null and b/react_native/3_3.png differ
diff --git a/react_native/3_4.png b/react_native/3_4.png
new file mode 100644
index 0000000..fbce669
Binary files /dev/null and b/react_native/3_4.png differ
diff --git a/react_native/3_5.png b/react_native/3_5.png
new file mode 100644
index 0000000..0080882
Binary files /dev/null and b/react_native/3_5.png differ
diff --git a/react_native/3_6.png b/react_native/3_6.png
new file mode 100644
index 0000000..8e7328e
Binary files /dev/null and b/react_native/3_6.png differ
diff --git a/react_native/3_7.png b/react_native/3_7.png
new file mode 100644
index 0000000..b98b980
Binary files /dev/null and b/react_native/3_7.png differ
diff --git a/react_native/3_8.png b/react_native/3_8.png
new file mode 100644
index 0000000..d8ef609
Binary files /dev/null and b/react_native/3_8.png differ
diff --git a/react_native/3_9.png b/react_native/3_9.png
new file mode 100644
index 0000000..08d94a2
Binary files /dev/null and b/react_native/3_9.png differ
diff --git a/react_native/第1篇Hello React-Native.md b/react_native/第1篇Hello React-Native.md
index e7fdd32..322c593 100644
--- a/react_native/第1篇Hello React-Native.md
+++ b/react_native/第1篇Hello React-Native.md
@@ -1,7 +1,7 @@
#React-Native入门指南
##第一篇环境配置 & Hello World
###一、前言
- 最近手头的工作繁多，有研究性的项目和系统研发，正好遇到同事离职，接手了框架的UI组件，不仅需要维护和填坑，还需要开发新的功能组件。因为身在H5-Hybird的框架部门，最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动，学了点Object-c,这次正好借此机会进入App开发，以弥补自己在Native-App上的经验不足。
+ 最近手头的工作繁多，有研究性的项目和系统研发，又遇到同事离职，接手了框架的UI组件，不仅需要维护和填坑，还需要开发新的功能组件。因为身在H5-Hybird的框架部门，最近团队开始尝试使用React-Native来做些东西。之前也有过开发iOS App的冲动，学了点Object-c,这次正好借此机会进入App开发，以弥补自己在Native-App上的经验不足。
###二、环境配置
(1)需要一台Mac(OSX),这个是前提，建议还是入手一本啦。
diff --git a/react_native/第2篇了解代码结构.html b/react_native/第2篇了解代码结构.html
new file mode 100644
index 0000000..96fc9bb
--- /dev/null
+++ b/react_native/第2篇了解代码结构.html
@@ -0,0 +1,264 @@
+
+
+
+
+
+
+React-Native入门指南
+
+
+
+React-Native入门指南
+
+第2篇代码结构
+
+一、了解index.ios.js
+
+大家都清楚，React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发，开发效率高、发布能力强，不仅拥有hybrid的开发效率，同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。
+用编辑器打开index.ios.js文件，分析代码结构：
+1、第一句：var React = require('react-native');有Node.js开发经验的同学都清楚，require可以引入其他模块。如果没有node.js开发经验的同学，可以脑补下java的import和c++的#include。
+2、第二句代码，批量定义组件：
+var {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View,
+} = React;
+其实，这只是一个语法糖而已，比如AppRegistry我们可以这样定义：var AppRegistry = React.AppRegistry;
+3、构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法，可以提前学习下。
+4、相对于web开发，我们需要提供视图的样式，那么StyleSheet.create就是干这件事的，只是用JS的自面量表达了css样式。
+5、如何引入css样式？其实在render方法返回的视图模板里已经体现出来了，即style={styles.container}.其中style是视图的一个属性，styles是我们定义的样式表，container是样式表中的一个样式。
+6、注册应用入口，这个一定不能少，否则模拟器会提示报错：
+ AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
+
+
+二、其实你还需要看点这方面的知识
+
+对于React-Native开发，仅仅有基础前端开发的知识是不够的，你还需要了解和掌握的有：
+
+
+
+- Node.js基础
+- JSX语法基础
+- Flexbox布局
+
+
+
+三、目前需要关注的文件
+
+1、目前阶段有几个文件时需要注意下的：
+（1）在xcode项目代码中AppDelegate.m会标识入口文件，例如：
+jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+如果是网上下载别人的源码，注意此处的ip和端口是否有被修改。
+（2）闪屏界面在哪修改？在xcode项目中找到LaunchScreen.xib文件，点击，你会看到界面，这个就是启动界面，你手动添加组件或者修改文本即可，最好了解下xcode的使用。
+（3）文本编辑器打开index.ios.js文件，是js代码的入口文件，所有的代码编写从这开始，可以定义自己的模块和引入第三方模块。
+
+
+四、修改文件index.ios.js
+
+1、修改启动界面，如下图
+
+
+
+
+2、添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个<Text>,增加我们需要的图片，因为图片更具表达力，就像最近的图片社交应用很火一样。
+(1)添加Image组件，将代码修改成如下即可：
+var {
+ StyleSheet,
+ Text,
+ View,
+ Image,
+} = React;
+（2）将render返回中的模版增加Image组件视图，具体如下：
+render: function() {
+ return (
+ <View style={styles.container}>
+ <Text style={styles.welcome}>
+ React-Native入门学习
+ </Text>
+ <Image style={styles.pic} source={{uri: 'https://avatars3.githubusercontent.com/u/6133685?v=3&s=460'}}>
+ </Image>
+ </View>
+ );
+}
+其中，Image标签的source的第一个大括号是模板，第二个大括号是js对象，js对象里面有个key是uri,表示图片的地址。
+（3）修改图片视图的样式，删除多余的样式，增加pic样式：
+var styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+ welcome: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10,
+ color: 'red',
+ },
+ pic: {
+ width:100,
+ height:100,
+ }
+});
+（4）可以cmd + Q 停止模拟器，然后再cmd + R开启模拟器，你会发现启动界面和首页都你想要的样子：
+
+
+ 
+
+如果终端被关闭了怎么办
+
+ 不用担心，其实只要你切到项目的根目录，命令行输入npm start即可，这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。
+
+
+ 
+
+
\ No newline at end of file
diff --git a/react_native/第2篇了解代码结构.md b/react_native/第2篇了解代码结构.md
new file mode 100644
index 0000000..cea89bc
--- /dev/null
+++ b/react_native/第2篇了解代码结构.md
@@ -0,0 +1,88 @@
+#React-Native入门指南
+##第2篇代码结构
+###一、了解index.ios.js
+ 大家都清楚，React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发，开发效率高、发布能力强，不仅拥有hybrid的开发效率，同时拥有native app相媲美的用户体验。目前天猫也在这块开始试水。
+ 用编辑器打开index.ios.js文件，分析代码结构：
+ 1、第一句：var React = require('react-native');有Node.js开发经验的同学都清楚，require可以引入其他模块。如果没有node.js开发经验的同学，可以脑补下java的import和c++的#include。
+ 2、第二句代码，批量定义组件：
+ var {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View,
+ } = React;
+ 其实，这只是一个语法糖而已，比如AppRegistry我们可以这样定义：var AppRegistry = React.AppRegistry;
+ 3、构建Heollo World入口类。React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实这是JSX的模板语法，可以提前学习下。
+ 4、相对于web开发，我们需要提供视图的样式，那么StyleSheet.create就是干这件事的，只是用JS的自面量表达了css样式。
+ 5、如何引入css样式？其实在render方法返回的视图模板里已经体现出来了，即style={styles.container}.其中style是视图的一个属性，styles是我们定义的样式表，container是样式表中的一个样式。
+ 6、注册应用入口，这个一定不能少，否则模拟器会提示报错：
+ AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
+
+
+###二、其实你还需要看点这方面的知识
+ 对于React-Native开发，仅仅有基础前端开发的知识是不够的，你还需要了解和掌握的有：
+* Node.js基础
+* JSX语法基础
+* Flexbox布局
+
+###三、目前需要关注的文件
+ 1、目前阶段有几个文件时需要注意下的：
+ （1）在xcode项目代码中AppDelegate.m会标识入口文件，例如：
+ jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+ 如果是网上下载别人的源码，注意此处的ip和端口是否有被修改。
+ （2）闪屏界面在哪修改？在xcode项目中找到LaunchScreen.xib文件，点击，你会看到界面，这个就是启动界面，你手动添加组件或者修改文本即可，最好了解下xcode的使用。
+ （3）文本编辑器打开index.ios.js文件，是js代码的入口文件，所有的代码编写从这开始，可以定义自己的模块和引入第三方模块。
+
+###四、修改文件index.ios.js
+ 1、修改启动界面，如下图
+
+
+ 2、添加图片和修改样式.我们在第一篇的demo基础上修改。去掉第二个和第三个,增加我们需要的图片，因为图片更具表达力，就像最近的图片社交应用很火一样。
+ (1)添加Image组件，将代码修改成如下即可：
+ var {
+ StyleSheet,
+ Text,
+ View,
+ Image,
+ } = React;
+ （2）将render返回中的模版增加Image组件视图，具体如下：
+ render: function() {
+ return (
+
+
+ React-Native入门学习
+
+
+
+
+ );
+ }
+ 其中，Image标签的source的第一个大括号是模板，第二个大括号是js对象，js对象里面有个key是uri,表示图片的地址。
+ （3）修改图片视图的样式，删除多余的样式，增加pic样式：
+ var styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: '#F5FCFF',
+ },
+ welcome: {
+ fontSize: 20,
+ textAlign: 'center',
+ margin: 10,
+ color: 'red',
+ },
+ pic: {
+ width:100,
+ height:100,
+ }
+ });
+ （4）可以cmd + Q 停止模拟器，然后再cmd + R开启模拟器，你会发现启动界面和首页都你想要的样子：
+ 
+
+###如果终端被关闭了怎么办
+ 不用担心，其实只要你切到项目的根目录，命令行输入npm start即可，这样即可开发终端监听。实际上也是node.js的监听服务开启而已。如下图表示成功。
+ 
+
+
+
\ No newline at end of file
diff --git a/react_native/第3篇css和布局.html b/react_native/第3篇css和布局.html
new file mode 100644
index 0000000..5cf4c2f
--- /dev/null
+++ b/react_native/第3篇css和布局.html
@@ -0,0 +1,350 @@
+
+
+
+
+
+
+React-Native入门指南
+
+
+
+React-Native入门指南
+
+第3篇CSS和UI布局
+
+一、了解React-Native组件
+
+作为开发者都知道，UI组件对于一个应用的重要性。也许，在一款应用中，你还没有完整的，有体系的构建UI组件，但是你一定或多或少有种想把组件抽出来的冲动，就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一话是十分必要的。常见的组件有：日历、下来列表（常在应用中表现为下拉刷新）、导航栏、头部、底部、选项卡等等。React-Native就提供了一套iOS原生的组件，这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局，使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图：
+
+
+
+
+二、使用CSS样式 & Flexbox布局
+
+第一篇，已经知道了如何构建工程。这里同样创建一个HelloWorld工程。默认启动界面如下图：
+
+
+
+
+1、基本样式
+这里使用View和Text组件作为演示对象，首先，修改index.ios.js里面的代码，这里只需要关注StyleSheet和render里面的模板。修改后的代码如下：
+/**
+* Sample React Native App
+* https://github.com/facebook/react-native
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View,
+} = React;
+
+var HelloWorld = React.createClass({
+ render: function() {
+ return (
+ <View>
+ <View></View>
+ </View>
+ );
+ }
+});
+
+var styles = StyleSheet.create({
+});
+
+AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
+这时候，你cmd + R刷新模拟器应该看到是空白的界面。现在，是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象，并且严格区分该对象属性的类型，所以要遵循对象的写法，而不能使用以前css的写法，这个需要自己熟悉了。
+（1）增加一个带边框的矩形，红色边框
+ 直接在组件上添加样式是这样的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性，第一个{}JS执行环境或者说是模板，第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下：
+ render: function() {
+ return (
+ <View>
+ <View style={{height:40, borderWidth: 1, borderColor: 'red'}}>
+
+ </View>
+ </View>
+ );
+ }
+ cmd ＋ R刷新模拟器，结果如下：
+
+
+ 
+
+ (2)如何知道该组件支持哪些样式呢？
+ 上面的已经很简单了，作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件又哪些样式，又不用查手册，一个最为简单的方法是，在样式表里写错一个属性，比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去，而不能写为内联样式。写成内联样式，你是看不到报错提示的。我门改写成样式表创建类里面：
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+ <View>
+ <View style={styles.style_1}>
+
+ </View>
+ </View>
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_1:{
+ border: '1px solid red',
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 这个时候你就能齐刷刷的看到样式表的报错和提示有哪些样式了，如下图所示：
+
+
+ 
+
+ （3）独立样式类
+ 其实上面已经展示了独立样式类了，那么样式类创建很简单，我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的<View style={{对象名称.对象属性}}></View>，就跟上面（2）的代码一样。
+
+ 2、说说Flexbox布局
+ 其实，这样的css样式，作为web开发这一用就会，那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话，最为重要的就是flexbox，目前支持的属性如下,有6个：
+
+
+ 
+
+ (1)先说flex属性，上一段代码
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+ <View style={styles.style_0}>
+ <View style={styles.style_1}></View>
+ <View style={styles.style_1}></View>
+ <View style={{flex:10}}></View>
+ </View>
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_0:{
+ flex:1,
+ },
+ style_1:{
+ flex: 5,
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 当一个(元素)组件，定义了flex属性时，表示改元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其他小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和他抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间，具体如下图：
+
+
+
+
+ (2) flexDirection
+ flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。具体的想过可见如下代码：
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+ <View style={styles.style_0}>
+ <View style={styles.style_1}>
+ <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
+ <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
+ </View>
+ <View style={[styles.style_1, {flexDirection: 'column'}]}>
+ <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
+ <Text style={{marginTop:40, fontSize:25}}>1／4高</Text>
+ </View>
+ <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
+ <Text style={{marginTop:40, fontSize:25}}>1／2高</Text>
+ </View>
+ </View>
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_0:{
+ flex:1,
+ },
+ style_1:{
+ flex: 5,
+ flexDirection: 'row',
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 具体的效果如下：
+
+
+
+
+ (3)alignSelf:对齐方式
+ alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、 auto、 stretch。看看代码，应该就很清楚了：
+
+
+
+
+ 效果如下图
+
+
+
+
+ （4）水平垂直居中
+ alignItems是alignSelf的变种，跟alignSelf的功能类似，可用于水平居中；justifyContent用于垂直居中，属性较多，可以了解下。
+
+
+
+
+ 效果如下图
+
+
+
+
+
\ No newline at end of file
diff --git a/react_native/第3篇css和布局.md b/react_native/第3篇css和布局.md
new file mode 100644
index 0000000..1744fdb
--- /dev/null
+++ b/react_native/第3篇css和布局.md
@@ -0,0 +1,166 @@
+#React-Native入门指南
+
+##第3篇CSS和UI布局
+
+###一、了解React-Native组件
+ 作为开发者都知道，UI组件对于一个应用的重要性。也许，在一款应用中，你还没有完整的，有体系的构建UI组件，但是你一定或多或少有种想把组件抽出来的冲动，就像有些冲动是人类的本能一样....这是作为一个开发者的本能。那么组件的复用和统一话是十分必要的。常见的组件有：日历、下来列表（常在应用中表现为下拉刷新）、导航栏、头部、底部、选项卡等等。React-Native就提供了一套iOS原生的组件，这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局，使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图：
+
+
+###二、使用CSS样式 & Flexbox布局
+ 第一篇，已经知道了如何构建工程。这里同样创建一个HelloWorld工程。默认启动界面如下图：
+
+
+ 1、基本样式
+ 这里使用View和Text组件作为演示对象，首先，修改index.ios.js里面的代码，这里只需要关注StyleSheet和render里面的模板。修改后的代码如下：
+ /**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ */
+ 'use strict';
+
+ var React = require('react-native');
+ var {
+ AppRegistry,
+ StyleSheet,
+ Text,
+ View,
+ } = React;
+
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+
+
+
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ });
+
+ AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
+ 这时候，你cmd + R刷新模拟器应该看到是空白的界面。现在，是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象，并且严格区分该对象属性的类型，所以要遵循对象的写法，而不能使用以前css的写法，这个需要自己熟悉了。
+ （1）增加一个带边框的矩形，红色边框
+ 直接在组件上添加样式是这样的：style={{height:40, borderWidth: 1, borderColor: 'red'}}style是组件的一个自有属性，第一个{}JS执行环境或者说是模板，第二个{}只是css样式对象的括号而已(慢慢体会,不难理解)。这样修改后的代码如下：
+ render: function() {
+ return (
+
+
+
+
+
+ );
+ }
+ cmd ＋ R刷新模拟器，结果如下：
+ 
+
+ (2)如何知道该组件支持哪些样式呢？
+ 上面的已经很简单了，作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件又哪些样式，又不用查手册，一个最为简单的方法是，在样式表里写错一个属性，比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去，而不能写为内联样式。写成内联样式，你是看不到报错提示的。我门改写成样式表创建类里面：
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+
+
+
+
+
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_1:{
+ border: '1px solid red',
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 这个时候你就能齐刷刷的看到样式表的报错和提示有哪些样式了，如下图所示：
+ 
+
+ （3）独立样式类
+ 其实上面已经展示了独立样式类了，那么样式类创建很简单，我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的，就跟上面（2）的代码一样。
+
+ 2、说说Flexbox布局
+ 其实，这样的css样式，作为web开发这一用就会，那么说说布局的事儿。除去margin, padding, position等大家熟悉的web布局的话，最为重要的就是flexbox，目前支持的属性如下,有6个：
+ 
+
+ (1)先说flex属性，上一段代码
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+
+
+
+
+
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_0:{
+ flex:1,
+ },
+ style_1:{
+ flex: 5,
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 当一个(元素)组件，定义了flex属性时，表示改元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其他小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和他抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间，具体如下图：
+
+
+ (2) flexDirection
+ flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)。具体的想过可见如下代码：
+ var HelloWorld = React.createClass({
+ render: function() {
+ return (
+
+
+ 1／4高
+ 1／4高
+
+
+ 1／4高
+ 1／4高
+
+
+ 1／2高
+
+
+ );
+ }
+ });
+
+ var styles = StyleSheet.create({
+ style_0:{
+ flex:1,
+ },
+ style_1:{
+ flex: 5,
+ flexDirection: 'row',
+ height:40,
+ borderWidth: 1,
+ borderColor: 'red',
+ }
+ });
+ 具体的效果如下：
+
+
+ (3)alignSelf:对齐方式
+ alignSelf的对齐方式主要有四种：flex-start、 flex-end、 center、 auto、 stretch。看看代码，应该就很清楚了：
+
+
+ 效果如下图
+
+
+ （4）水平垂直居中
+ alignItems是alignSelf的变种，跟alignSelf的功能类似，可用于水平居中；justifyContent用于垂直居中，属性较多，可以了解下。
+
+
+ 效果如下图
+