React Native 之 组件化开发

前言

• 学习本系列内容需要具备一定 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;
  
  

效果：