React Native 之元件化開發

阿新 • • 發佈：2019-01-10

前言

學習本系列內容需要具備一定 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

我們把介面整體分為上下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

現在我們把測試用的背景色去掉看看效果，是不是很接近微信的介面了
效果：

接下來我們來完成下半部分

檢視部分

    {/* 下部更多登入方式 */}
    <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

去掉測試時候的背景色，介面就搭建完畢了，效果如下
效果：

接下來就是讓圖片、按鈕、忘記密碼、更多這幾個標籤擁有接受觸控事件並做出反應的能力，這邊就以更多為例

包裝示例

    <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

React Native 之元件化開發

前言學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 HTML快速入門(一) 學習本人接觸 React Native 時間並不是特別長，所以對其中的內容和性質瞭解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批

筆記之元件化開發和元件管理工具composer

（1）元件化開發一個元件可以釋出供別人使用，也可以使用別人釋出的元件快速構建專案，更換元件而不需修改系統其他部分的程式碼。 laravel底層使用了很多symfony框架的元件。（2）如何實現元件化開發 composer，元件管理工具（3）composer compos

採用React+Ant Design元件化開發前端介面(一)

react-start 基礎知識 1.使用腳手架建立專案並啟動 1.1 安裝腳手架： npm install -g create-react-app 1.2 使用腳手架建立專案： create-react-app an

React Native 之Android混合開發，及遇到的各種坑

最近自己也是剛在學習React Native的知識，在學習到React Native 嵌入到原生應用的時候，感覺遇到了各種坑，這裡做一下記錄。若有說得不對的地方，謝謝大家糾正。 React Native嵌入到原生應用的教程在其官方指導文件裡也有，但是感覺很多注意點沒講到，現

React-Native 之Android應用開發踩坑紀（一）————windows環境下配置

歡迎轉載，轉載註明出處：我不只是看客自從在公司中被老大安利了移動開發的未來 React-Native之後開始關注相關，想嘗試相關app開發。正好畢業準備畢設，腦子一熱就選擇了RN來開發一款app……題目上交就不能改了，現在好後悔。。。但硬著頭皮上吧，廢

【React Native開發】React Native控制元件之Image元件講解與美團首頁頂部效果例項(10)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一下Image元件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請檢視之前

【React Native開發】React Native控制元件之TextInput元件講解與QQ登入介面實現(11)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一下文字輸入框TextInput元件的相關使用講解以及模仿實現一下QQ登入介面的效果。具體環境搭建以及相關配置

【React Native開發】React Native控制元件之ListView元件講解以及最齊全例項(19)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org今天我們一起來看一下ListView元件的使用詳解以及具體事例剛建立的React Native技術交流3群(496508742),Rea

【React Native開發】React Native控制元件之View檢視講解(7)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 現在幾講我們對於R

【React Native開發】React Native控制元件之RefreshControl元件詳解(21)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一下RefreshControl下拉重新整理元件講解以及使用例項剛建立的React Native技術交

【React Native開發】React Native控制元件之DrawerLayoutAndroid抽屜導航切換元件講解(13)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看一

【React Native開發】React Native控制元件之Switch開關與Picker選擇器元件講解以及使用(16)

轉載請標明出處：(一)前言【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 今天我們一起來看

使用WebStorm開發React-native之基礎

ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題：（1）找不到SDK路徑，或者沒有SDK對應的版本：SDK必須是android-23才可以(更新SDK) 解決方法：環境變量，必須設置Android_HOME

react元件化開發釋出到npm

1.專案目錄 build：webpack打包用（開發環境、釋出環境） example：開發環境的模板頁 lib：打包好的資料夾（用於釋出到npm上） src：想要封裝的公共元件 .babelrc：處理es6語法 package.json:打包的依賴檔案，管理專案模組包開發環

基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件react-native-refresh-loadmore-flatlist

react-native-refresh-loadmore-flatlist 基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件，具體實現功能如下：自定義下拉重新整理元件API 自定義上拉Lo

前端成長必經之路之元件化思維與技巧 Web元件化開發

1-1課程導學.mp42-1環境及知識準備.mp43-1 技術選型分析.mp43-2 工程構建安裝.mp44-1 css模組化設計.mp44-2 css模組化設計（程式碼）.mp44-3 js元件化及自適應mp4.mp44-4 spa設計.mp44-5 構建工具及上線指導.mp45-1 首頁-抽象元

React之元件化

image.png 一、說一下對元件化的理解 1.1 元件的封裝檢視資料變化邏輯 image.png 1.2 元件的複用 props 傳遞複用 image.png image.png 二、JSX

React Native之Text控制元件屬性和樣式

屬性 numberOfLines 文字行數限制，新增後超過限制行數文字會在末尾預設以…的形式省略。 ellipsizeMode 設定文字縮略格式，配合numberOfLines使用，values： * tail：在末尾…省略（預設值） * c

元件化開發之私有庫製作以及常見問題

前言：這篇文章主要描述私有庫的製作過程以及本人在使用過程中的一些問題和解決方案，提到元件化就不得不想到pods私有庫相關的東西(當然元件化不侷限於結合私有庫使用，還可以做成靜態庫或者多target開發等方式，這裡只講解私有庫相關的東西，稍後會出一篇元件化結合私有庫實現元件化開發的方式) 私有

iOS元件化開發之——使用Cocoapods打私有的Pod庫

隨著專案和業務的發展，專案中會有很多基礎功能模組和通用業務模組可以抽象出來獨立成元件，這樣可以為我們以後在開發新專案的時候提供共用基礎元件，進行元件化程式設計，不需要重新造輪子，提高開發效率。因此我們就需要一個方案來合理的管理公共的元件。 Spec Repo(配置倉庫)

React Native 之 元件化開發

前言

React Native元件化介紹

React Native元件化綜合例項

相關推薦

React Native 之元件化開發