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({ 相應視圖的樣式 });- 注冊并輸出組件
</li>module.exports = 組件名; - 生成組件后就可以在ios和android中使用生成后的組件了
// 引入組件庫 var 自定義組件名 = require('./組件名');- 使用生成的組件 </ul>
</li>export default class TestRN2 extends Component { render() { return ( <自定義組件名></自定義組件名> ); } } - 到此，組件化就簡單介紹到這，下面用一個綜合的實例來更好地幫助理解 </ul>
- 這邊我們通過完成微信的登錄界面這個實例來詳細講組件化的使用，先來看看微信登錄界面長啥樣
- 先來創建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;</code></pre> <pre>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> ); } }</code></pre> <p>效果：</p> <p><img src="https://simg.open-open.com/show/2330a39704f700fb8d5652c2f8e6c18e.png"></p> </li>- 我們把界面整體分為上下2大部分，先將這兩部分搞出來
// 視圖 var Login = React.createClass({ render() { return( <View style={styles.container}> {/ 上部登錄框 /} <View style={styles.loginViewStyle}></View> {/* 下部更多登錄方式 */} <View style={styles.moreLoginViewStyle}> </View> </View> ); } });</code></pre> <pre>// 樣式 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 } });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/53a039437cd1342bdcc268325c3acbe3.png"></li>- 接著我們來具體完成上面登錄框中的各個模塊
// 視圖 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> ); } });</code></pre> <pre>// 樣式 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 } });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/3f98a4b472b7a338a3b46143174cced4.png"></li>現在我們把測試用的背景色去掉看看效果，是不是很接近微信的界面了
效果：
- 接下來我們來完成下半部分
{/* 下部更多登錄方式 */} <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;</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/4e40fe073c13b47797b54e04f98f3c57.gif"></li></ul>
來自：http://www.cnblogs.com/miaomiaoshen/p/6035042.html
React Native組件化綜合實例
本文由用戶 MarSkidmore 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！