ReactNative學習筆記-仿今日頭條登錄頁面并添加用戶交互行為

ReactNative學習筆記-仿今日頭條登錄頁面2

在上一篇文章中,主要介紹了在ReactNative中的一些常用基礎控件,并且使用flexbox布局對今日頭條的登陸頁面進行了仿制。但上次完成的仿制頁面不具備任何的可操作性,所以本節內容將在原有頁面的基礎上進行擴展,使其具備一定的可操作性。

在仿制過程中將會主要用到組件有:導航組件可觸摸組件TextInput組件

導航組件

在開發中,我們需要實現多個界面的切換,這時候就需要一個導航控制器來進行各種效果的切換。那么,在ReactNative中有兩個組件能夠實現這樣的效果:NavigatorNavigatorIOS

其中Navigator是適配Android和iOS,而NavigatorIOS則是包裝了UIKit的導航功能,可以使用左劃功能來返回到上一界面。

在本實例中將主要采用NavigatorIOS來進行后續的開發工作,所以下面將簡單的概括下NavigatorIOS中的常用屬性:

barTintColor string
導航條的背景顏色。

initialRoute{}
NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數的參數都是這樣的路由對象。

參考實例:

initialRoute {
    component: function,   // 路由到對應的版塊  
    title: string,   // 標題  
    passProps: object,   // 傳遞的參數
    backButtonIcon: Image.propTypes.source,  // 返回按鈕
    backButtonTitle: string,  // 返回按鈕標題
    leftButtonIcon:Image.propTypes.source,  //左側圖標
    leftButtonTitle: string, //左側按鈕標題
    onLeftButtonPress: function, //左側按鈕點擊事件
    rightButtonIcon: Image.propTypes.source, //右側按鈕圖標
    rightButtonTitle: string, //    右側按鈕標題
    onRightButtonPress: function,// 右側按鈕點擊事件
    wrapperStyle: [object Object]
} 

itemWrapperStyle View#style
導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。

navigationBarHidden bool
一個布爾值,決定導航欄是否隱藏。

shadowHidden bool
一個布爾值,決定是否要隱藏1像素的陰影。

tintColor string
導航欄上按鈕的顏色。

titleTextColor string
導航器標題的文字顏色。

translucent bool
一個布爾值,決定是否導航條是半透明的。

可觸摸組件

在ReactNative中可觸摸組件共有四種:分別為TouchableOpacity,TouchableNativeFeedback,TouchableWithoutFeedback,TouchableHighlight。在本次開發中我們主要使用的為TouchableOpacity

TouchableOpacity

TouchableOpacity在用戶觸摸時提供了視覺效果,該組件在觸摸發生時會變成半透明的組建,也就是說被這個組件遮蓋的背景顏色、圖案將會透過它被顯示出來。

實例:

    <TouchableOpacity onPress={()=>this.loginByPhone()} 
                       activeOpacity={0.5} >
                    <View style={styles.loginByPhoneBtnContianer}>
                        <Text style={styles.loginByPhoneBtnTitle} >手機號登錄</Text>
                    </View>
    </TouchableOpacity>

其中,activeOpacity定義了透明度的取值范圍(0~1),0表示完全透明,1表示不透明。

TextInput組件

該組件相當于OC中的UITextField,在用法和屬性方面,兩者都有很大的相似之處。該組件可以使用View組件和Text組件的所有樣式鍵,并且沒有自己特殊的樣式鍵。

請注意關于TextInput組件內部的元素不在使用flexbox布局,而是采用的文本布局!
由于TextInput中的屬性較多,我們將在下面的開發按鈕中,對常用屬性進行簡單的總結。

仿制開始

重構index.ios.js

在當前操作中我們將引入導航組件

  • 代碼
import {
    AppRegistry,
    NavigatorIOS
} from 'react-native';

var LoginView = require('./TouTiaoLoginView');

var TouTiaoDemo =  React.createClass({
    render() {
        return (

            <NavigatorIOS
                ref='nav'
                initialRoute={{
                    component: LoginView,
                    title: '登錄',
                }}
                style={{flex: 1}}
            />
        );
    }
});

  • 結果展示
加入導航組件

其中component鍵用于設置需要路由的模塊,title鍵用于設置當前導航欄的標題

重構TouTiaoLoginView.js并加入點擊事件

當前重構主要是針對,手機號登錄按鈕添加了點擊事件,并在點擊事件中進行了頁面導航

  • 代碼
    {/**手機號登錄*/}
    <TouchableOpacity onPress={()=>this.loginByPhone()}>
        <View style={styles.loginByPhoneBtnContianer}>
            <Text style={styles.loginByPhoneBtnTitle} >手機號登錄</Text>
        </View>
    </TouchableOpacity>

    /**
     * 使用手機號進行登錄
     */
    loginByPhone :function () {
        //console.log('使用手機號登錄');
        this.props.navigator.push(
            {
                component: LoginByPhoneViewController,
                title: '手機號登錄',
            }
        );
    }

在回調方法loginByPhone中,我們使用了方法push(route)將當前頁面導航切換到一個新的頁面中(LoginByPhoneViewController)

手機號登陸頁面的繪制

手機號輸入框的繪制

  • 代碼
                <View style={styles.container}>
                    {/** 輸入框容器 */}
                    <View style={styles.textInputContianer}>
                        {/** 手機號輸入框 */}
                        <TextInput placeholder='手機號'
                                   style={styles.textInputStylePhoneNum}
                                   keyboardType='phone-pad'
                                   multiline={false}
                                   clearButtonMode='while-editing'
                                   placeholderTextColor={'#939393'}
                                   ref='phoneNum'
                                   onChangeText={(text) =>                                  this.phoneNumTextWatch(text)}
                        >

                        </TextInput>
                    </View>
                </View>
  • 樣式:
    //輸入框容器
    textInputContianer: {
        width: screenWidth * 0.9,
        height: 90,
        borderRadius: 20,
        borderColor: '#E8E8E8',
        marginTop: 90,
        borderWidth: 0.5
    },
    //輸入框樣式:手機號
    textInputStylePhoneNum: {
        width: screenWidth * 0.9,
        height: 45,
        paddingLeft: 10,
        paddingRight: 10
    },
  • 顯示結果
手機號輸入框的繪制

在TextInput組件中,keyboardType鍵用于設置軟鍵盤的類型,multiline鍵用于設置是否支持多行輸入,clearButtonMode鍵用于設置清除按鈕的出現模式,ref鍵則相當于相當于用于獲取該組件的id

密碼輸入框的繪制

  • 代碼
                        {/** 分割線 */}
                        <View style={styles.dividingLine}>

                        </View>
                        <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                            {/** 密碼輸入框 */}
                            <TextInput placeholder='密碼'
                                       style={styles.textInputStylePWD}
                                       secureTextEntry={true}
                                       multiline={false}
                                       clearButtonMode='while-editing'
                                       placeholderTextColor={'#939393'}
                                       ref='pwd'
                            >

                            </TextInput>
                            {/** 找回密碼前的豎線 */}
                            <View style={styles.verticalLine}>

                            </View>
                            {/** 找回密碼按鈕 */}
                            <Text style={styles.findPswBtn}>找回密碼</Text>
                        </View>
  • 樣式
    //輸入框樣式:密碼
    textInputStylePWD: {
        width: screenWidth * 0.9 - 80,
        height: 45,
        paddingLeft: 10,
        paddingRight: 10
    },
    //分割線
    dividingLine: {
        backgroundColor: '#E8E8E8',
        height: 0.5,
        width: screenWidth * 0.9
    },
    //豎線
    verticalLine: {
        backgroundColor: '#E8E8E8',
        height: 15,
        width: 0.5
    },
  • 顯示結果
密碼輸入框的繪制

在TextInput組件中,secureTextEntry鍵用于設置顯示類型為密碼,placeholderTextColor鍵用于設置提示文字的顏色

為輸入框綁定監聽事件

當前操作為監聽號碼輸入框的輸入信息,當輸入字符長度大于1時,啟用‘登錄’按鈕,當輸入字符為空時,禁用‘登錄’按鈕。

  • 代碼
<TextInput placeholder='手機號'
           style={styles.textInputStylePhoneNum}
           keyboardType='phone-pad'
           multiline={false}
           clearButtonMode='while-editing'
           placeholderTextColor={'#939393'}
           ref='phoneNum'
           onChangeText={(text) => this.phoneNumTextWatch(text)}
           >
</TextInput>

        getInitialState(){
            return {
                loginBtnBg: {backgroundColor: '#959595'},
                loginBtnTitleColor: {color: '#757575'}
            }
        },

        /**
         * 號碼輸入變化監聽
         */
        phoneNumTextWatch(text){

            if (text.length > 0) {
                this.setState({
                    loginBtnBg: {backgroundColor: '#F85959'},
                    loginBtnTitleColor: {color: '#ffffff'}
                });
            } else {
                this.setState({
                    loginBtnBg: {backgroundColor: '#959595'},
                    loginBtnTitleColor: {color: '#757575'}
                });
            }
        },

其中getInitialState()方法為生命周期方法,我們在該方法中初始化了2個局部變量:loginBtnBgloginBtnTitleColor;

在函數phoneNumTextWatch(text)中,我們通過this.setState({})方法來修改變量loginBtnBgloginBtnTitleColor從而達到更新頁面顯示效果的目的。

更多的關于生命周期,狀態機思維與變量的解說,我們將在下次進行具體說明。

感謝您的閱讀,如果喜歡或者有所幫助就請給個贊吧????

項目下載地址:https://github.com/wleics/ReactNative-Demo

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,523評論 25 708
  • 0.27 正式版發布 不兼容的修改 移除 NavigationLegacyNavigator (ef44781) ...
    被代碼耽誤的機車手閱讀 1,761評論 1 4
  • 剛剛看完宮部雪美的火車,小心臟有點受不了了,聽到陽臺的一點點動靜都大驚小怪
    木木君愛學習閱讀 65評論 0 0
  • 文/劉河秀 寫這篇感想的時候,窗外飄起了雪花,回頭不經意看見了飄窗上那盆枯萎的迷迭香,就想到了它的花語。 看完《挪...
    劉河秀閱讀 536評論 2 3
  • 我喜歡每日一起床就能看到綠色的植物,所以我養了好多花草,雖然這也花費了我很多的精力,但是我覺得值得。 如果你不喜歡...
    悠然小蝦閱讀 1,280評論 0 8