前言
學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開(kāi)發(fā)基礎(chǔ)后豫，沒(méi)有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(mén)(一) 學(xué)習(xí)
本人接觸 React Native 時(shí)間并不是特別長(zhǎng)，所以對(duì)其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差霜浴，在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容，也歡迎萬(wàn)能的朋友們批評(píng)指出，謝謝
文章第一版出自簡(jiǎn)書(shū)乳蛾，如果出現(xiàn)圖片或頁(yè)面顯示問(wèn)題，煩請(qǐng)轉(zhuǎn)至 簡(jiǎn)書(shū) 查看 也希望喜歡的朋友可以點(diǎn)贊鄙币，謝謝
React Native組件化介紹
React Native的核心思想就是組件化肃叶，相當(dāng)于MVC的view,因此開(kāi)發(fā)應(yīng)用的最佳方式就是將功能組件化
組件化最大的優(yōu)點(diǎn)可以使Android和iOS能夠很方便地用很少地代碼使用同一套組件，增加代碼的復(fù)用性
-
React Native的組件化很簡(jiǎn)單十嘿，基本步驟如下
- 引用需要的庫(kù)
// 引用 import React, { Component } from 'react'; import { 需要用到的組件庫(kù) } from 'react-native';- 實(shí)例化視圖入口
// 實(shí)例化視圖入口 // 因?yàn)楝F(xiàn)在還是在想ES6轉(zhuǎn)化過(guò)程中因惭，為了更好的兼容性，這邊使用的是ES5的格式 var 組件名 = React.createClass({ render(){ return( 需要實(shí)例化的視圖 ); } });- 視圖樣式入口
// 視圖樣式入口 // 因?yàn)楝F(xiàn)在還是在想ES6轉(zhuǎn)化過(guò)程中绩衷，為了更好的兼容性蹦魔，這邊使用的是ES5的格式 var styles = StyleSheet.create({ 相應(yīng)視圖的樣式 });- 注冊(cè)并輸出組件
module.exports = 組件名; - 引用需要的庫(kù)
-
生成組件后就可以在ios和android中使用生成后的組件了
- 引入組件庫(kù)
// 引入組件庫(kù) var 自定義組件名 = require('./組件名');- 使用生成的組件
export default class TestRN2 extends Component { render() { return ( <自定義組件名></自定義組件名> ); } } - 引入組件庫(kù)
到此，組件化就簡(jiǎn)單介紹到這咳燕，下面用一個(gè)綜合的實(shí)例來(lái)更好地幫助理解
React Native組件化綜合實(shí)例
- 這邊我們通過(guò)完成微信的登錄界面這個(gè)實(shí)例來(lái)詳細(xì)講組件化的使用勿决，先來(lái)看看微信登錄界面長(zhǎng)啥樣
微信登錄界面.png
-
先來(lái)創(chuàng)建JS文件,初始化一下格式并在index.ios.js中使用這個(gè)組件
創(chuàng)建組件JS文件.gif- 初始化JS格式
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from 'react-native'; // 實(shí)例化入口 var Login = React.createClass({ render() { return ( <View style={styles.container}> </View> ); } }); // 樣式 var styles = StyleSheet.create({ container: { flex:1, // 背景色 backgroundColor:'white' }, }); // 注冊(cè)輸出組件 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大部分，先將這兩部分搞出來(lái)
- 視圖部分
// 視圖 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', // 對(duì)齊方式 justifyContent:'space-between', alignItems:'center' }, loginViewStyle: { // 尺寸 width:width * 0.9, height:300, // 預(yù)設(shè)，等會(huì)會(huì)清除 // 背景色 backgroundColor:'red', // 上邊距 marginTop:85 }, moreLoginViewStyle: { // 尺寸 width:width * 0.9, height:40, // 預(yù)設(shè)争涌，等會(huì)會(huì)清除 // 背景色 backgroundColor:'red', // 下邊距 marginBottom:30 } });效果：
大體結(jié)構(gòu)搭建效果.png - 視圖部分
-
接著我們來(lái)具體完成上面登錄框中的各個(gè)模塊
- 視圖部分
// 視圖 var Login = React.createClass({ render() { return( <View style={styles.container}> {/* 上部登錄框 */} <View style={styles.loginViewStyle}> {/* 頭像 */} <Image source={{uri:'icon'}} style={styles.iconStyle}></Image> {/* 賬號(hào) */} <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='請(qǐng)?zhí)顚?xiě)密碼' ></TextInput> </View> {/* 登錄按鈕 */} <View style={styles.loginButtonStyle}> <Text style={{fontSize:17, color:'white'}}>登 錄</Text> </View> {/* 忘記密碼選項(xiàng) */} <Text style={{fontSize:15, color:'blue', marginTop: 15}}>登錄遇到問(wèn)題?</Text> </View> {/* 下部更多登錄方式 */} <View style={styles.moreLoginViewStyle}> </View> </View> ); } });- 樣式部分
// 樣式 var styles = StyleSheet.create({ container: { flex:1, // 背景色 backgroundColor:'white', // 對(duì)齊方式 justifyContent:'space-between', alignItems:'center' }, loginViewStyle: { // 尺寸 width:width * 0.9, // 背景色 backgroundColor:'red', // 上邊距 marginTop:85, // 對(duì)齊方式 alignItems:'center' }, iconStyle: { // 尺寸 width:iconWH, height:iconWH }, passwordViewStyle: { // 尺寸 width:width * 0.9, height:passwordViewH, // 背景色 backgroundColor:'yellow', // 上邊距 marginTop:20, // 主軸方向 flexDirection:'row', // 對(duì)齊方式 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, // 居中對(duì)齊 justifyContent:'center', alignItems:'center' }, moreLoginViewStyle: { // 尺寸 width:width * 0.9, height:40, // 背景色 backgroundColor:'red', // 下邊距 marginBottom:30 } });效果：
上部分結(jié)構(gòu)效果.png - 視圖部分
-
現(xiàn)在我們把測(cè)試用的背景色去掉看看效果糠雨，是不是很接近微信的界面了
效果：
上部分實(shí)際效果.png -
接下來(lái)我們來(lái)完成下半部分
- 視圖部分
{/* 下部更多登錄方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View>- 樣式部分
moreLoginViewStyle: { // 尺寸 width:width * 0.9, height:40, // 背景色 backgroundColor:'red', // 下邊距 marginBottom:30, // 對(duì)齊方式 alignItems:'center', justifyContent:'center' }效果：
下部分效果.png - 視圖部分
-
去掉測(cè)試時(shí)候的背景色，界面就搭建完畢了咆繁，效果如下
效果：
界面搭建完畢效果.png -
接下來(lái)就是讓圖片、按鈕控乾、忘記密碼么介、更多這幾個(gè)標(biāo)簽擁有接受觸摸事件并做出反應(yīng)的能力，這邊就以
更多為例- 包裝示例
<TouchableOpacity activeOpacity={0.5} onPress={() => {alert('點(diǎn)擊了更多')}} > {/* 下部更多登錄方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View> </TouchableOpacity>效果：
封裝更多觸摸事件.gif - 包裝示例
-
最后將組件完整的代碼和效果圖貼出來(lái)蜕衡，供參考
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'); // 常用參數(shù) 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('點(diǎn)擊了頭像')}} > {/* 頭像 */} <Image source={{uri:'icon'}} style={styles.iconStyle}></Image> </TouchableOpacity> {/* 賬號(hào) */} <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='請(qǐng)?zhí)顚?xiě)密碼' ></TextInput> </View> <TouchableOpacity activeOpacity={0.5} onPress={() => {alert('點(diǎn)擊了登錄按鈕')}} > {/* 登錄按鈕 */} <View style={styles.loginButtonStyle}> <Text style={{fontSize:17, color:'white'}}>登 錄</Text> </View> </TouchableOpacity> <TouchableOpacity activeOpacity={0.5} onPress={() => {alert('點(diǎn)擊了忘記密碼選項(xiàng)')}} > {/* 忘記密碼選項(xiàng) */} <Text style={{fontSize:15, color:'blue', marginTop: 15}}>登錄遇到問(wèn)題?</Text> </TouchableOpacity> </View> <TouchableOpacity activeOpacity={0.5} onPress={() => {alert('點(diǎn)擊了更多')}} > {/* 下部更多登錄方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View> </TouchableOpacity> </View> ); } }); // 樣式 var styles = StyleSheet.create({ container: { flex:1, // 背景色 backgroundColor:'white', // 對(duì)齊方式 justifyContent:'space-between', alignItems:'center' }, loginViewStyle: { // 尺寸 width:width * 0.9, // 上邊距 marginTop:85, // 對(duì)齊方式 alignItems:'center' }, iconStyle: { // 尺寸 width:iconWH, height:iconWH }, passwordViewStyle: { // 尺寸 width:width * 0.9, height:passwordViewH, // 上邊距 marginTop:20, // 主軸方向 flexDirection:'row', // 對(duì)齊方式 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, // 居中對(duì)齊 justifyContent:'center', alignItems:'center' }, moreLoginViewStyle: { // 尺寸 width:width * 0.9, height:40, // 下邊距 marginBottom:30, // 對(duì)齊方式 alignItems:'center', justifyContent:'center' } }); module.exports = Login;
效果：
整體效果.gif
