前言

• 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习

• 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢

• 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢

React Native组件化介绍

---

• React Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化

• 组件化最大的优点可以使Android和iOS能够很方便地用很少地代码使用同一套组件，增加代码的复用性

• React Native的组件化很简单，基本步骤如下

  • 引用需要的库

  	// 引用
  
  	import React, { Component } from 'react';
  
  	import {
  
  		需要用到的组件库
  
  	} from 'react-native';
  
  

  • 实例化视图入口

  	// 实例化视图入口
  
  	// 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式
  
  	var 组件名 = React.createClass({
  
  		render(){
  
  			return(
  
  				需要实例化的视图
  
  			);
  
  		}
  
  	});
  
  

  • 视图样式入口

  	// 视图样式入口
  
  	// 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式
  
  	var styles = StyleSheet.create({
  
  		相应视图的样式
  
  	});
  
  

  • 注册并输出组件

  	module.exports = 组件名;
  
  

• 生成组件后就可以在ios和android中使用生成后的组件了

  • 引入组件库

  	// 引入组件库
  
  	var 自定义组件名 = require('./组件名');
  
  

  • 使用生成的组件

  	export default class TestRN2 extends Component {
  
  		render() {
  
  			return (
  
    			<自定义组件名></自定义组件名>
  
  			);
  
  		}
  
  	}
  
  

• 到此，组件化就简单介绍到这，下面用一个综合的实例来更好地帮助理解

React Native组件化综合实例

---

• 这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用，先来看看微信登录界面长啥样

• 先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件
  
  

  • 初始化JS格式

  	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;
  
  

  • 使用组件

  	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>
  
  			);
  
  		}
  
  	}
  
  

  效果：

  

• 我们把界面整体分为上下2大部分，先将这两部分搞出来

  • 视图部分

  	// 视图
  
  	var Login = React.createClass({
  
  		render() {
  
      		return(
  
          		<View style={styles.container}>
  
              		{/* 上部登录框 */}
  
              		<View style={styles.loginViewStyle}>
  
              		</View>
  
              		{/* 下部更多登录方式 */}
  
              		<View style={styles.moreLoginViewStyle}>
  
              		</View>
  
          		</View>
  
      		);
  
  		}
  
  	});
  
  

  • 样式部分

  	// 样式
  
  	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
  
  		}
  
  	});
  
  

  效果：
  
  

• 接着我们来具体完成上面登录框中的各个模块

  • 视图部分

  	// 视图
  
  	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>
  
      		);
  
  		}
  
  	});
  
  

  • 样式部分

  	// 样式
  
  	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
  
  		}
  
  	});
  
  

  效果：
  
  

• 现在我们把测试用的背景色去掉看看效果，是不是很接近微信的界面了
  
  效果：
  
  

• 接下来我们来完成下半部分

  • 视图部分

  	{/* 下部更多登录方式 */}
  
      <View style={styles.moreLoginViewStyle}>
  
      	<Text style={{color:'blue', fontSize:17}}>更多</Text>
  
      </View>
  
  

  • 样式部分

  	moreLoginViewStyle: {
  
      	// 尺寸
  
      	width:width * 0.9,
  
      	height:40,
  
      	// 背景色
  
      	backgroundColor:'red',
  
      	// 下边距
  
      	marginBottom:30,
  
      	// 对齐方式
  
      	alignItems:'center',
  
      	justifyContent:'center'
  
  	}
  

  效果：
  
  

• 去掉测试时候的背景色，界面就搭建完毕了，效果如下
  
  效果：
  
  

• 接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力，这边就以更多为例

  • 包装示例

  	<TouchableOpacity
  
      	activeOpacity={0.5}
  
          onPress={() => {alert('点击了更多')}}
  
      >
  
      	{/* 下部更多登录方式 */}
  
          <View style={styles.moreLoginViewStyle}>
  
          	<Text style={{color:'blue', fontSize:17}}>更多</Text>
  
          </View>
  
      </TouchableOpacity>
  
  

  效果：
  
  

• 最后将组件完整的代码和效果图贴出来，供参考

  	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;
  
  

效果：