<h2>前言</h2>    <ul>     <li> <p>学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 <a href="/misc/goto?guid=4959723871313717555" rel="nofollow,noindex">HTML快速入门(一)</a> 学习</p> </li>     <li> <p>本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢</p> </li>    </ul>    <h2>React Native组件化介绍</h2>    <ul>     <li>React Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化</li>     <li>组件化最大的优点可以使Android和iOS能够很方便地用很少地代码使用同一套组件，增加代码的复用性</li>     <li>React Native的组件化很简单，基本步骤如下      <ul>       <li>引用需要的库</li>      </ul> <pre>  <code class="language-javascript">// 引用      import React, { Component } from 'react';      import {          需要用到的组件库      } from 'react-native';</code></pre>      <ul>       <li>实例化视图入口</li>      </ul> <pre>  <code class="language-javascript">// 实例化视图入口      // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式      var 组件名 = React.createClass({          render(){              return(                  需要实例化的视图              );          }      });</code></pre>      <ul>       <li>视图样式入口</li>      </ul> <pre>  <code class="language-javascript">// 视图样式入口      // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式      var styles = StyleSheet.create({          相应视图的样式      });</code></pre>      <ul>       <li>注册并输出组件</li>      </ul> <pre>  <code class="language-javascript">module.exports = 组件名;</code></pre> </li>     <li>生成组件后就可以在ios和android中使用生成后的组件了 <pre>  <code class="language-javascript">// 引入组件库      var 自定义组件名 = require('./组件名');</code></pre>      <ul>       <li>使用生成的组件</li>      </ul> <pre>  <code class="language-javascript">export default class TestRN2 extends Component {          render() {              return (              <自定义组件名></自定义组件名>              );          }      }</code></pre> </li>     <li>到此，组件化就简单介绍到这，下面用一个综合的实例来更好地帮助理解</li>    </ul>    <h2>React Native组件化综合实例</h2>    <ul>     <li>这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用，先来看看微信登录界面长啥样</li>    </ul>    <p><img src="https://simg.open-open.com/show/1dee6f887077323cc8a192691b0b1c3c.png"></p>    <ul>     <li>先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件<br> <img src="https://simg.open-open.com/show/1607cb5b86b7079dca5fc0354678f268.gif">      <ul>       <li>初始化JS格式</li>      </ul> <pre>  <code class="language-javascript">import React, { Component } from 'react';          import {              AppRegistry,              StyleSheet,              Text,              View,              Image,              TextInput,              TouchableOpacity          } from 'react-native';        // 实例化入口      var Login = React.createClass({          render() {              return (                  <View style={styles.container}>                    </View>              );          }      });        // 样式      var styles = StyleSheet.create({          container: {              flex:1,              // 背景色              backgroundColor:'white'          },      });        // 注册输出组件      module.exports = Login;</code></pre> <pre>  <code class="language-javascript">import React, { Component } from 'react';      import {          AppRegistry,          StyleSheet      } from 'react-native';        // 引用Login组件      var Login = require('./Login');        export default class WeiXin extends Component {          render() {              return (                  <View style={styles.container}>                      {/* 登录模块 */}                      <Login></Login>                  </View>              );          }      }</code></pre> <p>效果：</p> <p><img src="https://simg.open-open.com/show/2330a39704f700fb8d5652c2f8e6c18e.png"></p> </li>     <li>我们把界面整体分为上下2大部分，先将这两部分搞出来 <pre>  <code class="language-javascript">// 视图      var Login = React.createClass({          render() {              return(                  <View style={styles.container}>                      {/* 上部登录框 */}                      <View style={styles.loginViewStyle}>                        </View>                      {/* 下部更多登录方式 */}                      <View style={styles.moreLoginViewStyle}>                        </View>                  </View>              );          }      });</code></pre> <pre>  <code class="language-javascript">// 样式      var styles = StyleSheet.create({            container: {              flex:1,              // 背景色              backgroundColor:'white',              // 对齐方式              justifyContent:'space-between',              alignItems:'center'          },            loginViewStyle: {              // 尺寸              width:width * 0.9,              height:300, // 预设，等会会清除              // 背景色              backgroundColor:'red',              // 上边距              marginTop:85          },            moreLoginViewStyle: {              // 尺寸              width:width * 0.9,              height:40,  // 预设，等会会清除              // 背景色              backgroundColor:'red',              // 下边距              marginBottom:30          }      });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/53a039437cd1342bdcc268325c3acbe3.png"></li>     <li>接着我们来具体完成上面登录框中的各个模块 <pre>  <code class="language-javascript">// 视图      var Login = React.createClass({          render() {              return(                  <View style={styles.container}>                      {/* 上部登录框 */}                      <View style={styles.loginViewStyle}>                          {/* 头像 */}                          <Image source={{uri:'icon'}} style={styles.iconStyle}></Image>                          {/* 账号 */}                          <Text style={{fontSize:17, margin:10}}>12345</Text>                          {/* 密码输入框 */}                          <View style={styles.passwordViewStyle}>                              {/* 左边图片 */}                              <Image source={{uri:'password'}} style={styles.passwordImageStyle}></Image>                              {/* 右边输入框 */}                              <TextInput style={styles.passwordInputStyle}                                 placeholder='请填写密码'                      ></TextInput>                          </View>                          {/* 登录按钮 */}                          <View style={styles.loginButtonStyle}>                              <Text style={{fontSize:17, color:'white'}}>登 录</Text>                          </View>                          {/* 忘记密码选项 */}                          <Text style={{fontSize:15, color:'blue', marginTop: 15}}>登录遇到问题?</Text>                      </View>                      {/* 下部更多登录方式 */}                      <View style={styles.moreLoginViewStyle}>                        </View>                  </View>              );          }      });</code></pre> <pre>  <code class="language-javascript">// 样式      var styles = StyleSheet.create({            container: {              flex:1,              // 背景色              backgroundColor:'white',              // 对齐方式              justifyContent:'space-between',              alignItems:'center'          },            loginViewStyle: {              // 尺寸              width:width * 0.9,              // 背景色              backgroundColor:'red',              // 上边距              marginTop:85,              // 对齐方式              alignItems:'center'          },            iconStyle: {              // 尺寸              width:iconWH,              height:iconWH          },            passwordViewStyle: {              // 尺寸              width:width * 0.9,              height:passwordViewH,              // 背景色              backgroundColor:'yellow',              // 上边距              marginTop:20,              // 主轴方向              flexDirection:'row',              // 对齐方式              alignItems:'center',              // 下边框              borderBottomWidth:1,              borderBottomColor:'green'          },            passwordImageStyle: {              // 尺寸              width:passwordImageWH,              height:passwordImageWH,              // 图片填充方式              resizeMode:'contain',              // 左边距              marginLeft:passwordMargin          },            passwordInputStyle: {              // 尺寸              width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),              height:passwordViewH,              // 背景色              backgroundColor:'white',              // 左边距              marginLeft:passwordMargin          },            loginButtonStyle: {              // 尺寸              width:width * 0.9,              height:44,              // 背景色              backgroundColor:'green',              // 上边距              marginTop:20,              // 居中对齐              justifyContent:'center',              alignItems:'center'          },            moreLoginViewStyle: {              // 尺寸              width:width * 0.9,              height:40,              // 背景色              backgroundColor:'red',              // 下边距              marginBottom:30          }      });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/3f98a4b472b7a338a3b46143174cced4.png"></li>     <li> <p>现在我们把测试用的背景色去掉看看效果，是不是很接近微信的界面了</p> <p>效果：</p> <img src="https://simg.open-open.com/show/fab9ace4645cca0c73673cacf05d5ff0.png"></li>     <li>接下来我们来完成下半部分 <pre>  <code class="language-javascript">{/* 下部更多登录方式 */}      <View style={styles.moreLoginViewStyle}>          <Text style={{color:'blue', fontSize:17}}>更多</Text>      </View></code></pre> <pre>  <code class="language-javascript">moreLoginViewStyle: {          // 尺寸          width:width * 0.9,          height:40,          // 背景色          backgroundColor:'red',          // 下边距          marginBottom:30,          // 对齐方式          alignItems:'center',          justifyContent:'center'      }</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/0972b9d96f39853da162e23a09a66a12.png"></li>     <li> <p>去掉测试时候的背景色，界面就搭建完毕了，效果如下</p> <p>效果：</p> <img src="https://simg.open-open.com/show/3cd56c6ff4068c9db1790e6533b124ee.png"></li>     <li>接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力，这边就以 更多 为例 <pre>  <code class="language-javascript"><TouchableOpacity          activeOpacity={0.5}          onPress={() => {alert('点击了更多')}}      >          {/* 下部更多登录方式 */}          <View style={styles.moreLoginViewStyle}>              <Text style={{color:'blue', fontSize:17}}>更多</Text>          </View>      </TouchableOpacity></code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/4d7344dbfaa5fdc3998b5c666915d782.gif"></li>     <li> <p>最后将组件完整的代码和效果图贴出来，供参考</p> <pre>  <code class="language-javascript">import React, { Component } from 'react';      import {          AppRegistry,          StyleSheet,          Text,          View,          TextInput,          Image,          TouchableOpacity      } from 'react-native';        var Dimensions = require('Dimensions');      var {width, height} = Dimensions.get('window');        // 常用参数      var iconWH = 70;      var passwordViewH = 30;      var passwordImageWH = 25;      var passwordMargin = 5;          // 视图      var Login = React.createClass({          render() {              return(                  <View style={styles.container}>                      {/* 上部登录框 */}                      <View style={styles.loginViewStyle}>                          <TouchableOpacity                              activeOpacity={0.5}                              onPress={() => {alert('点击了头像')}}                          >                          {/* 头像 */}                          <Image source={{uri:'icon'}} style={styles.iconStyle}></Image>                          </TouchableOpacity>                          {/* 账号 */}                          <Text style={{fontSize:17, margin:10}}>12345</Text>                          {/* 密码输入框 */}                          <View style={styles.passwordViewStyle}>                              {/* 左边图片 */}                              <Image source={{uri:'password'}} style={styles.passwordImageStyle}></Image>                              {/* 右边输入框 */}                              <TextInput style={styles.passwordInputStyle}                                 placeholder='请填写密码'                              ></TextInput>                          </View>                          <TouchableOpacity                              activeOpacity={0.5}                              onPress={() => {alert('点击了登录按钮')}}                          >                          {/* 登录按钮 */}                          <View style={styles.loginButtonStyle}>                              <Text style={{fontSize:17, color:'white'}}>登 录</Text>                          </View>                          </TouchableOpacity>                          <TouchableOpacity                              activeOpacity={0.5}                              onPress={() => {alert('点击了忘记密码选项')}}                          >                          {/* 忘记密码选项 */}                          <Text style={{fontSize:15, color:'blue', marginTop: 15}}>登录遇到问题?</Text>                          </TouchableOpacity>                      </View>                      <TouchableOpacity                          activeOpacity={0.5}                          onPress={() => {alert('点击了更多')}}                      >                      {/* 下部更多登录方式 */}                      <View style={styles.moreLoginViewStyle}>                          <Text style={{color:'blue', fontSize:17}}>更多</Text>                      </View>                      </TouchableOpacity>                  </View>              );          }      });        // 样式      var styles = StyleSheet.create({            container: {              flex:1,              // 背景色              backgroundColor:'white',              // 对齐方式              justifyContent:'space-between',              alignItems:'center'          },            loginViewStyle: {              // 尺寸              width:width * 0.9,              // 上边距              marginTop:85,              // 对齐方式              alignItems:'center'          },            iconStyle: {              // 尺寸              width:iconWH,              height:iconWH          },            passwordViewStyle: {              // 尺寸              width:width * 0.9,              height:passwordViewH,              // 上边距              marginTop:20,              // 主轴方向              flexDirection:'row',              // 对齐方式              alignItems:'center',              // 下边框              borderBottomWidth:1,              borderBottomColor:'green'          },            passwordImageStyle: {              // 尺寸              width:passwordImageWH,              height:passwordImageWH,              // 图片填充方式              resizeMode:'contain',              // 左边距              marginLeft:passwordMargin          },            passwordInputStyle: {              // 尺寸              width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),              height:passwordViewH,              // 左边距              marginLeft:passwordMargin          },            loginButtonStyle: {              // 尺寸              width:width * 0.9,              height:44,              // 背景色              backgroundColor:'green',              // 上边距              marginTop:20,              // 居中对齐              justifyContent:'center',              alignItems:'center'          },            moreLoginViewStyle: {              // 尺寸              width:width * 0.9,              height:40,              // 下边距              marginBottom:30,              // 对齐方式              alignItems:'center',              justifyContent:'center'          }      });        module.exports = Login;</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/4e40fe073c13b47797b54e04f98f3c57.gif"></li>    </ul>    <p> </p>    <p>来自：http://www.cnblogs.com/miaomiaoshen/p/6035042.html</p>    <p> </p>