ReactNative學(xué)習(xí)筆記-仿今日頭條登錄頁面2
在上一篇文章中穆壕，主要介紹了在ReactNative中的一些常用基礎(chǔ)控件铝噩，并且使用flexbox布局對(duì)今日頭條的登陸頁面進(jìn)行了仿制。但上次完成的仿制頁面不具備任何的可操作性蝇刀，所以本節(jié)內(nèi)容將在原有頁面的基礎(chǔ)上進(jìn)行擴(kuò)展树枫，使其具備一定的可操作性直焙。
在仿制過程中將會(huì)主要用到組件有：導(dǎo)航組件、可觸摸組件砂轻、TextInput組件
導(dǎo)航組件
在開發(fā)中奔誓，我們需要實(shí)現(xiàn)多個(gè)界面的切換，這時(shí)候就需要一個(gè)導(dǎo)航控制器來進(jìn)行各種效果的切換搔涝。那么厨喂，在ReactNative中有兩個(gè)組件能夠?qū)崿F(xiàn)這樣的效果：Navigator和NavigatorIOS。
其中Navigator是適配Android和iOS庄呈，而NavigatorIOS則是包裝了UIKit的導(dǎo)航功能蜕煌，可以使用左劃功能來返回到上一界面。
在本實(shí)例中將主要采用NavigatorIOS來進(jìn)行后續(xù)的開發(fā)工作,所以下面將簡單的概括下NavigatorIOS中的常用屬性:
barTintColor string
導(dǎo)航條的背景顏色诬留。
initialRoute{}
NavigatorIOS使用"路由"對(duì)象來包含要渲染的子視圖斜纪、它們的屬性、以及導(dǎo)航條配置文兑。"push"和任何其它的導(dǎo)航函數(shù)的參數(shù)都是這樣的路由對(duì)象盒刚。
參考實(shí)例:
initialRoute {
component: function, // 路由到對(duì)應(yīng)的版塊
title: string, // 標(biāo)題
passProps: object, // 傳遞的參數(shù)
backButtonIcon: Image.propTypes.source, // 返回按鈕
backButtonTitle: string, // 返回按鈕標(biāo)題
leftButtonIcon:Image.propTypes.source, //左側(cè)圖標(biāo)
leftButtonTitle: string, //左側(cè)按鈕標(biāo)題
onLeftButtonPress: function, //左側(cè)按鈕點(diǎn)擊事件
rightButtonIcon: Image.propTypes.source, //右側(cè)按鈕圖標(biāo)
rightButtonTitle: string, // 右側(cè)按鈕標(biāo)題
onRightButtonPress: function,// 右側(cè)按鈕點(diǎn)擊事件
wrapperStyle: [object Object]
}
itemWrapperStyle View#style
導(dǎo)航器中的組件的默認(rèn)屬性。一個(gè)常見的用途是設(shè)置所有頁面的背景顏色绿贞。
navigationBarHidden bool
一個(gè)布爾值因块，決定導(dǎo)航欄是否隱藏。
shadowHidden bool
一個(gè)布爾值樟蠕，決定是否要隱藏1像素的陰影贮聂。
tintColor string
導(dǎo)航欄上按鈕的顏色靠柑。
titleTextColor string
導(dǎo)航器標(biāo)題的文字顏色寨辩。
translucent bool
一個(gè)布爾值，決定是否導(dǎo)航條是半透明的歼冰。
可觸摸組件
在ReactNative中可觸摸組件共有四種:分別為TouchableOpacity,TouchableNativeFeedback,TouchableWithoutFeedback,TouchableHighlight靡狞。在本次開發(fā)中我們主要使用的為TouchableOpacity。
TouchableOpacity
TouchableOpacity在用戶觸摸時(shí)提供了視覺效果隔嫡，該組件在觸摸發(fā)生時(shí)會(huì)變成半透明的組建甸怕，也就是說被這個(gè)組件遮蓋的背景顏色甘穿、圖案將會(huì)透過它被顯示出來。
實(shí)例：
<TouchableOpacity onPress={()=>this.loginByPhone()}
activeOpacity={0.5} >
<View style={styles.loginByPhoneBtnContianer}>
<Text style={styles.loginByPhoneBtnTitle} >手機(jī)號(hào)登錄</Text>
</View>
</TouchableOpacity>
其中梢杭，activeOpacity定義了透明度的取值范圍(0~1),0表示完全透明温兼，1表示不透明。
TextInput組件
該組件相當(dāng)于OC中的UITextField武契，在用法和屬性方面募判，兩者都有很大的相似之處。該組件可以使用View組件和Text組件的所有樣式鍵咒唆，并且沒有自己特殊的樣式鍵届垫。
請(qǐng)注意關(guān)于TextInput組件內(nèi)部的元素不在使用flexbox布局，而是采用的文本布局全释！
由于TextInput中的屬性較多装处，我們將在下面的開發(fā)按鈕中，對(duì)常用屬性進(jìn)行簡單的總結(jié)浸船。
仿制開始
重構(gòu)index.ios.js
在當(dāng)前操作中我們將引入導(dǎo)航組件妄迁。
- 代碼
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鍵用于設(shè)置需要路由的模塊，title鍵用于設(shè)置當(dāng)前導(dǎo)航欄的標(biāo)題
重構(gòu)TouTiaoLoginView.js并加入點(diǎn)擊事件
當(dāng)前重構(gòu)主要是針對(duì)糟袁，手機(jī)號(hào)登錄按鈕添加了點(diǎn)擊事件判族，并在點(diǎn)擊事件中進(jìn)行了頁面導(dǎo)航
- 代碼
{/**手機(jī)號(hào)登錄*/}
<TouchableOpacity onPress={()=>this.loginByPhone()}>
<View style={styles.loginByPhoneBtnContianer}>
<Text style={styles.loginByPhoneBtnTitle} >手機(jī)號(hào)登錄</Text>
</View>
</TouchableOpacity>
/**
* 使用手機(jī)號(hào)進(jìn)行登錄
*/
loginByPhone :function () {
//console.log('使用手機(jī)號(hào)登錄');
this.props.navigator.push(
{
component: LoginByPhoneViewController,
title: '手機(jī)號(hào)登錄',
}
);
}
在回調(diào)方法loginByPhone中，我們使用了方法push(route)將當(dāng)前頁面導(dǎo)航切換到一個(gè)新的頁面中(LoginByPhoneViewController)
手機(jī)號(hào)登陸頁面的繪制
手機(jī)號(hào)輸入框的繪制
- 代碼
<View style={styles.container}>
{/** 輸入框容器 */}
<View style={styles.textInputContianer}>
{/** 手機(jī)號(hào)輸入框 */}
<TextInput placeholder='手機(jī)號(hào)'
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
},
//輸入框樣式:手機(jī)號(hào)
textInputStylePhoneNum: {
width: screenWidth * 0.9,
height: 45,
paddingLeft: 10,
paddingRight: 10
},
- 顯示結(jié)果
在TextInput組件中项戴，keyboardType鍵用于設(shè)置軟鍵盤的類型形帮，multiline鍵用于設(shè)置是否支持多行輸入，clearButtonMode鍵用于設(shè)置清除按鈕的出現(xiàn)模式周叮，ref鍵則相當(dāng)于相當(dāng)于用于獲取該組件的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鍵用于設(shè)置顯示類型為密碼，placeholderTextColor鍵用于設(shè)置提示文字的顏色
為輸入框綁定監(jiān)聽事件
當(dāng)前操作為監(jiān)聽號(hào)碼輸入框的輸入信息仿耽，當(dāng)輸入字符長度大于1時(shí)合冀，啟用‘登錄’按鈕，當(dāng)輸入字符為空時(shí)项贺，禁用‘登錄’按鈕君躺。
- 代碼
<TextInput placeholder='手機(jī)號(hào)'
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'}
}
},
/**
* 號(hào)碼輸入變化監(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()方法為生命周期方法，我們?cè)谠摲椒ㄖ谐跏蓟?個(gè)局部變量：loginBtnBg开缎、loginBtnTitleColor;
在函數(shù)phoneNumTextWatch(text)中棕叫，我們通過this.setState({})方法來修改變量loginBtnBg、loginBtnTitleColor從而達(dá)到更新頁面顯示效果的目的奕删。
更多的關(guān)于生命周期,狀態(tài)機(jī)思維與變量的解說俺泣，我們將在下次進(jìn)行具體說明。
感謝您的閱讀，如果喜歡或者有所幫助就請(qǐng)給個(gè)贊吧????
項(xiàng)目下載地址:https://github.com/wleics/ReactNative-Demo
