前言
-
學習本系列內容需要具備一定 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> ); } }效果：
- 初始化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 } });效果：
- 視圖部分
-
接着我們來具體完成上面登錄框中的各個模塊
- 視圖部分
// 視圖 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;
效果：
