React Native實現(xiàn)簡單的登錄功能(推薦)

更新時間：2016年09月19日 11:04:21 作者：淘_tao

這篇文章主要介紹了React Native實現(xiàn)登錄功能的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

React Native 簡介：

React Native 結合了 Web 應用和 Native 應用的優(yōu)勢，可以使用 JavaScript 來開發(fā) iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統(tǒng)原生的 UI 組件，代替 DOM 元素來渲染等。

React Native 使你能夠使用基于 JavaScript 和 React 一致的開發(fā)體驗在本地平臺上構建世界一流的應用程序體驗。React Native 把重點放在所有開發(fā)人員關心的平臺的開發(fā)效率上——開發(fā)者只需學習一種語言就能輕易為任何平臺高效地編寫代碼。Facebook 在多個應用程序產(chǎn)品中使用了 React Native，并將繼續(xù)為 React Native 投資。

學習React Native也有2個月了，從最開始的頁面到點點擊事件，到調(diào)用接口大體都會了，今天實現(xiàn)一個簡單的登錄功能。

這里需要說明幾點：

1、<TextInput>組件在React Native中，默認是帶一條橫線的，如果想去掉輸入框下面的橫線，需要給<TextInput>指定一個underlineColorAndroid='transparent'，這樣就可以去掉輸入框下面的橫線了；

2、密碼輸入框需要指定屬性：secureTextEntry={true}

3、要顯示圖片，必須為<Image>標簽指定寬度和高度，和Android中不同的是，<Image>沒法自動調(diào)整圖片的大小，沒有類似Android中的wrap_content。

代碼如下：

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 
import React, {Component} from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
Image, 
View, 
TextInput 
} from 'react-native'; 
class ReactDemo extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<View style={styles.header}> 
<Text style={styles.headtitle}>添加賬號</Text> 
</View> 
<View style={styles.marginTopview}/> 
<View style={styles.inputview}> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ號/手機號/郵箱'/> 
<View style={styles.dividerview}> 
<Text style={styles.divider}></Text> 
</View> 
<TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='密碼' 
secureTextEntry={true}/> 
</View> 
<View style={styles.bottomview}> 
<View style={styles.buttonview}> 
<Text style={styles.logintext}>登 錄</Text> 
</View> 
<View style={styles.bottombtnsview}> 
<View style={styles.bottomleftbtnview}> 
<Text style={styles.bottombtn}>無法登錄？</Text> 
</View> 
<View style={styles.bottomrightbtnview}> 
<Text style={styles.bottombtn}>新用戶</Text> 
</View> 
</View> 
</View> 
</View> 
); 
} 
} 
const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: '#FFFFFF' 
}, 
header: { 
height: 50, 
backgroundColor: '#12B7F5', 
justifyContent: 'center', 
}, 
headtitle: { 
alignSelf: 'center', 
fontSize: 20, 
color: '#ffffff', 
}, 
avatarview: { 
height: 150, 
backgroundColor: '#ECEDF1', 
justifyContent: 'center', 
}, 
avatarimage: { 
width: 100, 
height: 100, 
alignSelf: 'center' 
}, 
marginTopview: { 
height: 15, 
backgroundColor: '#F7F7F9' 
}, 
inputview: { 
height: 100, 
}, 
textinput: { 
flex: 1, 
fontSize: 16, 
}, 
dividerview: { 
flexDirection: 'row', 
}, 
divider: { 
flex: 1, 
height: 1, 
backgroundColor: '#ECEDF1' 
}, 
bottomview: { 
backgroundColor: '#ECEDF1', 
flex: 1, 
}, 
buttonview: { 
backgroundColor: '#1DBAF1', 
margin: 10, 
borderRadius: 6, 
justifyContent: 'center', 
alignItems: 'center', 
}, 
logintext: { 
fontSize: 17, 
color: '#FFFFFF', 
marginTop: 10, 
marginBottom: 10, 
}, 
emptyview: { 
flex: 1, 
}, 
bottombtnsview: { 
flexDirection: 'row', 
}, 
bottomleftbtnview: { 
flex: 1, 
height: 50, 
paddingLeft: 10, 
alignItems: 'flex-start', 
justifyContent: 'center', 
}, 
bottomrightbtnview: { 
flex: 1, 
height: 50, 
paddingRight: 10, 
alignItems: 'flex-end', 
justifyContent: 'center', 
}, 
bottombtn: { 
fontSize: 15, 
color: '#1DBAF1', 
} 
}); 
AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

以上所述是小編給大家介紹的React Native實現(xiàn)登錄功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: