ReactNative學習筆記-仿今日頭條登錄頁面2
在上一篇文章中，主要介紹了在ReactNative中的一些常用基礎控件，并且使用flexbox布局對今日頭條的登陸頁面進行了仿制。但上次完成的仿制頁面不具備任何的可操作性，所以本節(jié)內(nèi)容將在原有頁面的基礎上進行擴展，使其具備一定的可操作性。
在仿制過程中將會主要用到組件有：導航組件、可觸摸組件、TextInput組件
導航組件
在開發(fā)中，我們需要實現(xiàn)多個界面的切換，這時候就需要一個導航控制器來進行各種效果的切換。那么，在ReactNative中有兩個組件能夠?qū)崿F(xiàn)這樣的效果：Navigator和NavigatorIOS。
其中Navigator是適配Android和iOS，而NavigatorIOS則是包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。
在本實例中將主要采用NavigatorIOS來進行后續(xù)的開發(fā)工作,所以下面將簡單的概括下NavigatorIOS中的常用屬性:
barTintColor string
導航條的背景顏色。
initialRoute{}
NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數(shù)的參數(shù)都是這樣的路由對象。
參考實例:
initialRoute {
component: function, // 路由到對應的版塊
title: string, // 標題
passProps: object, // 傳遞的參數(shù)
backButtonIcon: Image.propTypes.source, // 返回按鈕
backButtonTitle: string, // 返回按鈕標題
leftButtonIcon:Image.propTypes.source, //左側(cè)圖標
leftButtonTitle: string, //左側(cè)按鈕標題
onLeftButtonPress: function, //左側(cè)按鈕點擊事件
rightButtonIcon: Image.propTypes.source, //右側(cè)按鈕圖標
rightButtonTitle: string, // 右側(cè)按鈕標題
onRightButtonPress: function,// 右側(cè)按鈕點擊事件
wrapperStyle: [object Object]
}
itemWrapperStyle View#style
導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。
navigationBarHidden bool
一個布爾值，決定導航欄是否隱藏。
shadowHidden bool
一個布爾值，決定是否要隱藏1像素的陰影。
tintColor string
導航欄上按鈕的顏色。
titleTextColor string
導航器標題的文字顏色。
translucent bool
一個布爾值，決定是否導航條是半透明的。
可觸摸組件
在ReactNative中可觸摸組件共有四種:分別為TouchableOpacity,TouchableNativeFeedback,TouchableWithoutFeedback,TouchableHighlight。在本次開發(fā)中我們主要使用的為TouchableOpacity。
TouchableOpacity
TouchableOpacity在用戶觸摸時提供了視覺效果，該組件在觸摸發(fā)生時會變成半透明的組建，也就是說被這個組件遮蓋的背景顏色、圖案將會透過它被顯示出來。
實例：
<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組件的所有樣式鍵，并且沒有自己特殊的樣式鍵。
請注意關(guān)于TextInput組件內(nèi)部的元素不在使用flexbox布局，而是采用的文本布局！
由于TextInput中的屬性較多，我們將在下面的開發(fā)按鈕中，對常用屬性進行簡單的總結(jié)。
仿制開始
重構(gòu)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}}
/>
);
}
});
- 結(jié)果展示
其中component鍵用于設置需要路由的模塊，title鍵用于設置當前導航欄的標題
重構(gòu)TouTiaoLoginView.js并加入點擊事件
當前重構(gòu)主要是針對，手機號登錄按鈕添加了點擊事件，并在點擊事件中進行了頁面導航
- 代碼
{/**手機號登錄*/}
<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: '手機號登錄',
}
);
}
在回調(diào)方法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
},
- 顯示結(jié)果
在TextInput組件中，keyboardType鍵用于設置軟鍵盤的類型，multiline鍵用于設置是否支持多行輸入，clearButtonMode鍵用于設置清除按鈕的出現(xiàn)模式，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
},
- 顯示結(jié)果
在TextInput組件中，secureTextEntry鍵用于設置顯示類型為密碼，placeholderTextColor鍵用于設置提示文字的顏色
為輸入框綁定監(jiān)聽事件
當前操作為監(jiān)聽號碼輸入框的輸入信息，當輸入字符長度大于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'}
}
},
/**
* 號碼輸入變化監(jiān)聽
*/
phoneNumTextWatch(text){
if (text.length > 0) {
this.setState({
loginBtnBg: {backgroundColor: '#F85959'},
loginBtnTitleColor: {color: '#ffffff'}
});
} else {
this.setState({
loginBtnBg: {backgroundColor: '#959595'},
loginBtnTitleColor: {color: '#757575'}
});
}
},
其中g(shù)etInitialState()方法為生命周期方法，我們在該方法中初始化了2個局部變量：loginBtnBg、loginBtnTitleColor;
在函數(shù)phoneNumTextWatch(text)中，我們通過this.setState({})方法來修改變量loginBtnBg、loginBtnTitleColor從而達到更新頁面顯示效果的目的。
更多的關(guān)于生命周期,狀態(tài)機思維與變量的解說，我們將在下次進行具體說明。
感謝您的閱讀，如果喜歡或者有所幫助就請給個贊吧????
