ReactNative學習-仿今日頭條登錄頁面
上次說完了SublimeText的安裝，這是主要通過仿制一個今日頭條的登錄頁面，來簡單的介紹下React Native中常用控件的使用。
在仿制過程中，我們主要將使用的控件有如下三個:View,Text,Image。
flexbox布局
在項目的開始之前，我們先簡單的介紹下flexbox布局。flexbox又稱之為彈性盒，是W3C提出的UI設計模型規范的一種實現，在React Native中實現了其大部分功能，并且大部分組件的style都支持flexbox布局樣式設置。
位置：position鍵
關于position鍵，其值共有兩項，'relative','absolute'。
其中'relative'是默認值，表示當前的位置值是相對位置，而在采用‘absolute’時，則表示當前使用的是絕對位置。
在使用absolute時，我們還能使用：top,left,right,bottom四個鍵，來表述當前組件距父組件對應位置的距離為多少pt。有關position鍵的使用，將在仿制代碼中進行具體的介紹。
排列規則:flexDirection鍵
flexDirection鍵決定了組件內部的子組件的排列方式，共有兩種常用的排列方式：'column','row'。其中column為默認的排列方式，即縱向排列，通過使用值：row,我們可以將排列方式調整為橫向排列。
方向排列:justifyContent鍵:
justifyContent鍵可以用來定義在一個給定方向上，如何排列子組件。總共有5個字符串類型值，分別為：
- flex-start:頂端排列
- flex-end:低端排列
- center:居中排列
- space-between:兩端對齊
- space-around:包裹
對齊方式:alignItems鍵:
alignItems鍵決定了View中的所有子組件的對齊方式。總共有4個字符串類型值，分別為:
- flex-start:頂部對齊
- flex-end:底部對齊
- center:居中
- stretch:拉上
在flexbox的使用過程中，還有一些是決定組件顯示規則的鍵，如：flex,margin等，此處不再進行一一說明，讀者如有興趣，這里是有關flexbox使用的官方說明地址：https://facebook.github.io/react-native/docs/flexbox.html，讀者可自行查看。
繪制今日頭條的登錄頁面
上面簡單的介紹了下flexbox布局，現在我們便開始仿制今日頭條的登錄頁面。
此處插入圖片
頁面的分割
通過觀察，我們可以簡單的將頁面劃分為上下兩個部分。上半部分非常簡單，僅為一個大圖片。下半部分則相對復雜一些，其中包含該了多個按鈕，標簽等信息。
- 頁面元素：
<View style={styles.container}>
{/** 用于放置頂部的大圖片 */}
<View style={styles.topViewContainer}>
</View>
{/** 用于與登錄相關的按鈕 */}
<View style={styles.bottomViewContainer}>
</View>
</View>
- 樣式部分：
//頂部樣式
topViewContainer: {
flex:3,
//距離頂部高度
marginTop:22,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#1BA261'
},
//底部樣式
bottomViewContainer: {
flex:2,
justifyContent:'flex-start',
alignItems:'center',
backgroundColor:'#FFCE44'
},
在頁面的分割過程中，通過使用鍵flex，將上下兩個視圖均分了父視圖的高度，分別為父視圖高度的3/5,與2/5。
繪制上半部分
通過分析頁面的上半部分只有一張圖片，所以我們將采用Image標簽來添加圖片。
- 代碼如下:
<View style={styles.container}>
{/** 用于放置頂部的大圖片 */}
<View style={styles.topViewContainer}>
<Image source={require('./images/login_large_ic.png')}
style={styles.topImageStyle}/>
</View>
{/** 用于與登錄相關的按鈕 */}
<View style={styles.bottomViewContainer}>
</View>
</View>
- 樣式部分：
//頂部圖片的樣式
topImageStyle:{
width:screenWidth * 0.5,
height:screenWidth * 0.5,
},
- 結果展示
在Image標簽使用source來加載圖片，由于我們使用的是本地圖片，所以使用方法require()來讀取本地資源。
下半部分繪制-登陸與注冊按鈕
到目前位置頁面的上半部分已經繪制完成，我們將開始繪制頁面的下半部分。通過分析頁面的下半部分可以拆分為三個部分：
- 登錄按鈕
- 注冊按鈕
- 其他登錄方式
由于登錄，注冊按鈕的相似性，所以將一起繪制這兩個按鈕。
- 繪制代碼
{/** 用于與登錄相關的按鈕 */}
<View style={styles.bottomViewContainer}>
{/**手機號登錄*/}
<View style={styles.loginByPhoneBtnContianer}>
<Text style={styles.loginByPhoneBtnTitle}>手機號登錄</Text>
</View>
{/**立即注冊*/}
<View style={styles.registeredBtnContianer}>
<Text style={styles.registeredBtnTitle}>立即注冊</Text>
</View>
</View>
- 對應樣式
//手機號登錄容器樣式
loginByPhoneBtnContianer:{
backgroundColor:'#FE3232',
width:screenWidth * 0.5,
height:35,
justifyContent:'center',
alignItems:'center',
borderRadius:5
},
//按鈕文字樣式
loginByPhoneBtnTitle:{
color:'white',
fontSize:18
},
//立即注冊按鈕容器樣式
registeredBtnContianer:{
width:screenWidth * 0.5,
height:35,
justifyContent:'center',
alignItems:'center',
borderRadius:5,
borderColor:'#FE3232',
borderWidth:0.5,
marginTop:10
},
//立即注冊按鈕文字樣式
registeredBtnTitle:{
color:'#FE3232',
fontSize:18
},
- 結果展示：
在兩個按鈕的繪制過程中，使用了鍵justifyContent,alignItems來讓Text文本始終處于容器的中間，使用borderRadius來設置邊框的圓角角度。
下半部分繪制-其他登錄方式
該部分可以分成3個部分來分別繪制：
- 底部容器視圖
- 提示標簽
- 第三方登錄按鈕組
底部容器視圖的繪制
當前操作將在頁面的底部繪制一個用來放置提示標簽，與第三方登錄按鈕組的矩形容器。
- 繪制代碼
<View style={styles.bottomViewContainer}>
{/**手機號登錄*/}
<View style={styles.loginByPhoneBtnContianer}>
<Text style={styles.loginByPhoneBtnTitle}>手機號登錄</Text>
</View>
{/**立即注冊*/}
<View style={styles.registeredBtnContianer}>
<Text style={styles.registeredBtnTitle}>立即注冊</Text>
</View>
{/**其他登錄方式*/}
<View style={styles.loginByOtherContianer}>
</View>
</View>
- 對應樣式
//其他登錄方式的容器
loginByOtherContianer:{
width:screenWidth,
position:'absolute',
bottom:20,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#17A05E',
height:100
},
- 結果展示
在當前的操作中，通過使用鍵position,并標示其值為absolute（絕對位置）后，將該容器視圖設置在了頁面底部，最后通過使用鍵bottom,將容器的位置最終設置為距離底部20pt的地方。
繪制提示標簽
當前操作為繪制一條提示標語
- 繪制代碼
{/**其他登錄方式*/}
<View style={styles.loginByOtherContianer}>
{/**其他登錄方式標簽*/}
<View style={{flexDirection:'row',alignItems: 'center'}}>
<View style={styles.loginByOtherLine}></View>
<Text style={styles.otherLoginHintLabel}>其他方式登錄</Text>
<View style={styles.loginByOtherLine}></View>
</View>
</View>
- 對應樣式
//橫線
loginByOtherLine:{
backgroundColor:'#999999',
height:1,
width:screenWidth*0.25,
marginLeft:10,
marginRight:10
},
//其他登錄方式的提示
otherLoginHintLabel:{
color: '#505050',
fontSize:13
}
- 結果展示
繪制第三方登陸按鈕
最后一步，繪制第三放登錄按鈕
- 繪制代碼
{/**第三方登錄標識*/}
<View style={styles.socialLoginBtnContianer}>
<Image source={require('./images/ic_qq_login_normal.png')}
style={styles.socialLoginBtnStyle}/>
<Image source={require('./images/ic_weibo_login_normal.png')}
style={styles.socialLoginBtnStyle}/>
<Image source={require('./images/ic_weixin_login_normal.png')}
style={styles.socialLoginBtnStyle}/>
<Image source={require('./images/ic_tencent_login_normal.png')}
style={styles.socialLoginBtnStyle}/>
<Image source={require('./images/ic_renren_login_normal.png')}
style={styles.socialLoginBtnStyle}/>
</View>
- 對應樣式
//第三方登錄按鈕容器
socialLoginBtnContianer:{
flexDirection:'row',
marginTop:10
},
//第三方登錄按鈕的樣式
socialLoginBtnStyle:{
width:40,
height:40,
margin:5
},
- 結果展示
內容有點長，感謝觀看??
