React-Native 之 組件化開發(fā)

前言

  • 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)

  • 本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝

  • 文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

React Native組件化介紹

  • React Native的核心思想就是組件化，相當(dāng)于MVC的view,因此開發(fā)應(yīng)用的最佳方式就是將功能組件化

  • 組件化最大的優(yōu)點可以使Android和iOS能夠很方便地用很少地代碼使用同一套組件，增加代碼的復(fù)用性

  • React Native的組件化很簡單，基本步驟如下

    • 引用需要的庫


        // 引用
    import React, { Component } from 'react';
    import {
        需要用到的組件庫
    } from 'react-native';
    • 實例化視圖入口


        // 實例化視圖入口
    // 因為現(xiàn)在還是在想ES6轉(zhuǎn)化過程中，為了更好的兼容性，這邊使用的是ES5的格式
    var 組件名 = React.createClass({
        render(){
            return(
                需要實例化的視圖
            );
        }
    });
    • 視圖樣式入口


        // 視圖樣式入口
    // 因為現(xiàn)在還是在想ES6轉(zhuǎn)化過程中，為了更好的兼容性，這邊使用的是ES5的格式
    var styles = StyleSheet.create({
        相應(yīng)視圖的樣式
    });
    • 注冊并輸出組件


        module.exports = 組件名;

  • 生成組件后就可以在ios和android中使用生成后的組件了

    • 引入組件庫


        // 引入組件庫
    var 自定義組件名 = require('./組件名');
    • 使用生成的組件


        export default class TestRN2 extends Component {
        render() {
            return (
            <自定義組件名></自定義組件名>
            );
        }
    }

  • 到此，組件化就簡單介紹到這，下面用一個綜合的實例來更好地幫助理解

React Native組件化綜合實例

  • 這邊我們通過完成微信的登錄界面這個實例來詳細(xì)講組件化的使用，先來看看微信登錄界面長啥樣
微信登錄界面.png

  • 先來創(chuàng)建JS文件,初始化一下格式并在index.ios.js中使用這個組件


    創(chuàng)建組件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

  • 我們把界面整體分為上下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, // 預(yù)設(shè)，等會會清除
            // 背景色
            backgroundColor:'red',
            // 上邊距
            marginTop:85
        },

        moreLoginViewStyle: {
            // 尺寸
            width:width * 0.9,
            height:40,  // 預(yù)設(shè)，等會會清除
            // 背景色
            backgroundColor:'red',
            // 下邊距
            marginBottom:30
        }
    });

    效果：


    大體結(jié)構(gòu)搭建效果.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='請?zhí)顚懨艽a'
                    ></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
        }
    });

    效果：


    上部分結(jié)構(gòu)效果.png

  • 現(xiàn)在我們把測試用的背景色去掉看看效果，是不是很接近微信的界面了
    效果：


    上部分實際效果.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

  • 接下來就是讓圖片、按鈕、忘記密碼、更多這幾個標(biāo)簽擁有接受觸摸事件并做出反應(yīng)的能力，這邊就以更多為例

    • 包裝示例


        <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');

    // 常用參數(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('點擊了頭像')}}
                        >
                        {/* 頭像 */}
                        <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='請?zhí)顚懨艽a'
                            ></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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 20,814評論 15贊 16
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 7,418評論 33贊 15
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 30,453評論 15贊 29
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 6,161評論 11贊 9
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 13,588評論 11贊 24

友情鏈接更多精彩內(nèi)容