React Native 之 組件化開發

来源:http://www.cnblogs.com/miaomiaoshen/archive/2016/11/06/6035042.html
-Advertisement-
Play Games

前言 學習本系列內容需要具備一定 HTML 開發基礎，沒有基礎的朋友可以先轉至 "HTML快速入門(一)" 學習 本人接觸 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({
        相應視圖的樣式
    });
    • 註冊並輸出組件


        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

  • 現在我們把測試用的背景色去掉看看效果，是不是很接近微信的界面了
    效果：
    上部分實際效果.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

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


        <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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 團隊作業—看法
    團隊項目：井字棋游戲 我們對本次項目的一些看法： a：我們這次的項目，在現有井字棋游戲的基礎上進行了一次創新，讓用戶體驗到一種全新的游戲方式，使用戶眼前一亮，重拾這個游戲的興趣，又能吸引初學者的眼球。我們的創新點在於對游戲的游戲模式進行了創新和改進，使用九個小棋盤替代原有的一個棋盤，不論從游戲的視覺 ...
  • 矽谷商城6--購物車編輯實現
    完成狀態 編輯狀態 1_設置點擊事件和定義狀態 在GovaffairPager類中 2_在適配器中刪除選中的item 在GovaffairPager類中 在適配器中的代碼 ...
  • 矽谷商城5--購物車商品選中和商品總價計算
    1_商品總價格計算 ①在GovaffairPager類中設置 ②GovaffairPagerAdapter 2_增加商品或者減少商品的時候計算總價格 3_設置點擊某一條item 1_先定義介面和調用 2_調用介面 3_在構造方法中設置監聽 4_全選和反選 ...
  • 矽谷商城4--顯示購物車商品
    1_購物車頁面和標題欄的設置 govaffair_pager.xml 2_設置適配器 ...
  • 矽谷商城3--購物車數據存儲器
    1_創建購物車類ShoppingCart 作用：購物車類繼承Wares，記錄某個商品在購物車中的狀態，例如有多少個商品，是否選中 2_創建數據存儲類CartProvider 作用：數據存儲類，存儲數據；存儲數據--把集合轉成String類型存儲（Gson）；取數據--把String轉換成列表數據(G ...
  • Android7.0 Phone應用源碼分析（二） phone來電流程分析
    Android7.0 Phone來電流程分析 --- 本文為原創文章，轉載請註明出處，http://www.cnblogs.com/lance2016/p/6035351.html ...
  • [轉]一些NSArray,NSDictionary,NSSet相關的演算法知識
    iOS編程當中的幾個集合類：NSArray，NSDictionary，NSSet以及對應的Mutable版本，應該所有人都用過。只是簡單使用的話，相信沒人會用錯，但要做到高效（時間複雜度）精確（業務準確性），還需要瞭解其中所隱藏的演算法知識。 在項目當中使用集合類幾乎是不可避免的，集合類的使用場景其實 ...
  • 矽谷商城2--自定義數字加減控制項
    1_自定義數字加減控制項的要求 創建Module -NumberAddSubView A_輸入的只能是數字，而且不能通過鍵盤輸入 B_通過加減按鈕操作數字 C_監聽加減按鈕 D_數組有最小值和最大值的限制 E_自定義屬性 2_提供介面，讓外界監聽到數字的變化 1_設置介面 2_監聽變化 3_自定義屬性 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類