前言
学习本系列内容需要具备一定 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组件化综合实例
- 这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用，先来看看微信登录界面长啥样
微信登录界面.png
-
先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件
创建组件JS文件.gif- 初始化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> ); } }效果：
初始化并使用组件.png - 初始化JS格式
-
我们把界面整体分为上下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 } });效果：
大体结构搭建效果.png - 视图部分
-
接着我们来具体完成上面登录框中的各个模块
- 视图部分
// 视图 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 } });效果：
上部分结构效果.png - 视图部分
-
现在我们把测试用的背景色去掉看看效果，是不是很接近微信的界面了
效果：
上部分实际效果.png -
接下来我们来完成下半部分
- 视图部分
{/* 下部更多登录方式 */} <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' }效果：
下部分效果.png - 视图部分
-
去掉测试时候的背景色，界面就搭建完毕了，效果如下
效果：
界面搭建完毕效果.png -
接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力，这边就以
更多为例- 包装示例
<TouchableOpacity activeOpacity={0.5} onPress={() => {alert('点击了更多')}} > {/* 下部更多登录方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View> </TouchableOpacity>效果：
封装更多触摸事件.gif - 包装示例
-
最后将组件完整的代码和效果图贴出来，供参考
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;
效果：
整体效果.gif
