react-native 完整實(shí)現(xiàn)登錄功能的示例代碼
更新時(shí)間：2017年09月11日 14:45:51 作者：mangues
本篇文章主要介紹了react-native 完整實(shí)現(xiàn)登錄功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
react native實(shí)現(xiàn)登錄功能，包括ui的封裝、網(wǎng)絡(luò)請(qǐng)求的封裝、導(dǎo)航器的實(shí)現(xiàn)、點(diǎn)擊事件。
demo下載：react-native 完整實(shí)現(xiàn)登錄功能
后臺(tái)如果是springmvc實(shí)現(xiàn)的需要配置上如下代碼
<!--加入multipart 的解析器,這個(gè)必須配置，一會(huì)在controller里抓取上傳文件時(shí)要用。否則會(huì)報(bào)錯(cuò)。-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="102400"></property>
<property name="defaultEncoding" value="utf-8"/><!--屬性：編碼-->
</bean>
1.實(shí)現(xiàn)的界面
2.完整目錄
3.主界面的代碼實(shí)現(xiàn)
import React, { Component } from 'react';
import {
ToolbarAndroid,
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
import EditView from '../lib/EditView';
import LoginButton from '../lib/LoginButton';
import LoginSuccess from '../ui/LoginSuccess';
import NetUitl from '../lib/NetUtil';
export default class LoginActivity extends Component {
constructor(props) {
super(props);
this.userName = "";
this.password = "";
}
render() {
return (
<View style={LoginStyles.loginview}>
<View style={{flexDirection: 'row',height:100,marginTop:1,
justifyContent: 'center',
alignItems: 'flex-start',}}>
<Image source={require('../image/login.png')}/>
</View>
<View style={{marginTop:80}}>
<EditView name='輸入用戶名/注冊(cè)手機(jī)號(hào)' onChangeText={(text) => {
this.userName = text;
}}/>
<EditView name='輸入密碼' onChangeText={(text) => {
this.password = text;
}}/>
<LoginButton name='登錄' onPressCallback={this.onPressCallback}/>
<Text style={{color:"#4A90E2",textAlign:'center',marginTop:10}} >忘記密碼？</Text>
</View>
</View>
)
}
onPressCallback = () => {
let formData = new FormData();
formData.append("loginName",this.userName);
formData.append("pwd",this.password);
let url = "http://localhost:8080/loginApp";
NetUitl.postJson(url,formData,(responseText) => {
alert(responseText);
this.onLoginSuccess();
})
};
//跳轉(zhuǎn)到第二個(gè)頁(yè)面去
onLoginSuccess(){
const { navigator } = this.props;
if (navigator) {
navigator.push({
name : 'LoginSuccess',
component : LoginSuccess,
});
}
}
}
class loginLineView extends Component {
render() {
return (
<Text >
沒有帳號(hào)
</Text>
);
}
}
const LoginStyles = StyleSheet.create({
loginview: {
flex: 1,
padding: 30,
backgroundColor: '#ffffff',
},
});
說明：
1.使用了線性布局，從上往下依次Image，EditView，LoginButton，Text
2.EditView和LoginButton 為自定義控件，實(shí)現(xiàn)輸入框，和按鈕的封裝。
4.EditView.js
import React, { Component } from 'react';
import {
ToolbarAndroid,
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
export default class EditView extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={LoginStyles.TextInputView}>
<TextInput style={LoginStyles.TextInput}
placeholder={this.props.name}
onChangeText={
(text) => {
this.setState({text});
this.props.onChangeText(text);
}
}
/>
</View>
);
}
}
const LoginStyles = StyleSheet.create({
TextInputView: {
marginTop: 10,
height:50,
backgroundColor: '#ffffff',
borderRadius:5,
borderWidth:0.3,
borderColor:'#000000',
flexDirection: 'column',
justifyContent: 'center',
},
TextInput: {
backgroundColor: '#ffffff',
height:45,
margin:18,
},
});
說明：
1.利用TextInput的onChangeText 方法獲取到輸入框中輸入的數(shù)據(jù)，在利用EditView 傳入的onChangeText回調(diào)方法，把數(shù)據(jù)回調(diào)出封裝的EditView，在外部獲取到TextInput輸入的數(shù)據(jù)。
5.LoginButton.js
import React, { Component } from 'react';
import {
ToolbarAndroid,
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
export default class LoginButton extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<TouchableOpacity onPress={this.props.onPressCallback} style={LoginStyles.loginTextView}>
<Text style={LoginStyles.loginText} >
{this.props.name}
</Text>
</TouchableOpacity>
);
}
}
const LoginStyles = StyleSheet.create({
loginText: {
color: '#ffffff',
fontWeight: 'bold',
width:30,
},
loginTextView: {
marginTop: 10,
height:50,
backgroundColor: '#3281DD',
borderRadius:5,
flexDirection: 'row',
justifyContent: 'center',
alignItems:'center',
},
});
說明：
1.利用TouchableOpacity包住Text實(shí)現(xiàn)點(diǎn)擊效果，onPress是點(diǎn)擊時(shí)調(diào)用，當(dāng)點(diǎn)擊時(shí)onPress觸發(fā)，調(diào)用外部傳入的onPressCallback 方法實(shí)現(xiàn)觸發(fā)事件在封裝的LoginButton外部定義觸發(fā)的效果。
6.NetUtil.js
let NetUtil = {
postJson(url, data, callback){
var fetchOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'multipart/form-data;boundary=6ff46e0b6b5148d984f148b6542e5a5d'
},
body:data
};
fetch(url, fetchOptions)
.then((response) => response.text())
.then((responseText) => {
// callback(JSON.parse(responseText));
callback(responseText);
}).done();
},
}
export default NetUtil;
說明：網(wǎng)絡(luò)方法，依次傳入請(qǐng)求地址，請(qǐng)求參數(shù)，成功回調(diào)事件
7.LoginSuccess.js
import React from 'react';
import {
View,
Navigator,
TouchableOpacity,
ToolbarAndroid,
Text
} from 'react-native';
export default class LoginSuccess extends React.Component {
constructor(props){
super(props);
this.state = {};
}
//回到第一個(gè)頁(yè)面去
onJump(){
const { navigator } = this.props;
if (navigator) {
navigator.pop();
}
}
render(){
return (
<View >
<TouchableOpacity onPress = {this.onJump.bind(this)}>
<Text> 登錄成功，點(diǎn)擊返回登錄頁(yè)面 </Text>
</TouchableOpacity>
</View>
);
}
}
說明：登錄成功后跳轉(zhuǎn)的界面
8.navigator.js
導(dǎo)航器控制類。利用name，component 實(shí)現(xiàn)導(dǎo)航（可以自己隨便定義命名，只要后面的類中訪問同樣的命名即可，課參考LoginSuccess.js 中的返回功能）
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator
} from 'react-native';
import Main from './ui/main';
export default class navigator extends Component {
constructor(props) {
super(props);
}
render() {
let defaultName = 'Main';
let defaultComponent = Main;
return (
<Navigator
initialRoute = {{name : defaultName , component: defaultComponent}}
configureScene = {(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route,navigator) => {
let Component = route.component;
return <Component {...route.params} navigator = {navigator} />
}}
/>
);
}
};
9.index.android.js
規(guī)定的類
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
ToolbarAndroid,
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity
} from 'react-native';
import Navigator from './app/navigator';
AppRegistry.registerComponent('AwesomeProject', () => Navigator);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何用react優(yōu)雅的書寫CSS，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了React控制元素顯示隱藏的三種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
解決React報(bào)錯(cuò)You provided a `checked` prop&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
詳解React項(xiàng)目中eslint使用百度風(fēng)格
這篇文章主要介紹了React項(xiàng)目中eslint使用百度風(fēng)格,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-12-12
react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
react native 文字輪播的實(shí)現(xiàn)示例
這篇文章主要介紹了react native 文字輪播的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了React中的setState使用細(xì)節(jié)和原理解析,主要包括使用setstate的原因及基本用法，本文通過實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
React知識(shí)中一個(gè)主要內(nèi)容便是組件之間的通信，以下列舉幾種常用的組件通信方式，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-10-10
在react中使用highlight.js將頁(yè)面上的代碼高亮的方法
本文通過 highlight.js 庫(kù)實(shí)現(xiàn)對(duì)文章正文 HTML 中的代碼元素自動(dòng)添加語(yǔ)法高亮，具有一定的參考價(jià)值，感興趣的可以了解一下2022-01-01