點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

react-native 完整實現登錄功能的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:30:40

react-native 完整實現登錄功能的示例代碼

react-native 完整實現登錄功能的示例代碼:react native實現登錄功能，包括ui的封裝、網絡請求的封裝、導航器的實現、點擊事件。 demo下載：react-native 完整實現登錄功能后臺如果是springmvc實現的需要配置上如下代碼 <!--加入multipart 的解析器,這個必須配置，一會在controlle

推薦度：

點擊下載本文 文檔為doc格式

導讀react-native 完整實現登錄功能的示例代碼:react native實現登錄功能，包括ui的封裝、網絡請求的封裝、導航器的實現、點擊事件。 demo下載：react-native 完整實現登錄功能后臺如果是springmvc實現的需要配置上如下代碼 <!--加入multipart 的解析器,這個必須配置，一會在controlle

react native實現登錄功能，包括ui的封裝、網絡請求的封裝、導航器的實現、點擊事件。

demo下載：react-native 完整實現登錄功能

后臺如果是springmvc實現的需要配置上如下代碼

 <!--加入multipart 的解析器,這個必須配置，一會在controller里抓取上傳文件時要用。否則會報錯。-->
 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

 <property name="maxUploadSize" value="102400"></property>

 <property name="defaultEncoding" value="utf-8"/><!--屬性：編碼-->

 </bean>

1.實現的界面

這里寫圖片描述

2.完整目錄

這里寫圖片描述

3.主界面的代碼實現

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='輸入用戶名/注冊手機號' 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();
 })


 };

 //跳轉到第二個頁面去
 onLoginSuccess(){
 const { navigator } = this.props;
 if (navigator) {
 navigator.push({
 name : 'LoginSuccess',
 component : LoginSuccess,
 });
 }
 }

}

class loginLineView extends Component {
 render() {
 return (
 <Text >
 沒有帳號
 </Text>
 );
 }
}

const LoginStyles = StyleSheet.create({
 loginview: {
 flex: 1,
 padding: 30,
 backgroundColor: '#ffffff',
 },
});

說明：

1.使用了線性布局，從上往下依次Image，EditView，LoginButton，Text

2.EditView和LoginButton 為自定義控件，實現輸入框，和按鈕的封裝。

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 方法獲取到輸入框中輸入的數據，在利用EditView 傳入的onChangeText回調方法，把數據回調出封裝的EditView，在外部獲取到TextInput輸入的數據。

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實現點擊效果，onPress是點擊時調用，當點擊時onPress觸發，調用外部傳入的onPressCallback 方法實現觸發事件在封裝的LoginButton外部定義觸發的效果。

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;

說明：網絡方法，依次傳入請求地址，請求參數，成功回調事件

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 = {};

 }
 //回到第一個頁面去
 onJump(){
 const { navigator } = this.props;
 if (navigator) {
 navigator.pop();
 }
 }

 render(){
 return (

 <View >
 <TouchableOpacity onPress = {this.onJump.bind(this)}>
 <Text> 登錄成功，點擊返回登錄頁面 </Text>
 </TouchableOpacity>
 </View>


 );

 }

}

說明：登錄成功后跳轉的界面

8.navigator.js

導航器控制類。利用name，component 實現導航（可以自己隨便定義命名，只要后面的類中訪問同樣的命名即可，課參考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

規定的類

/**
 * 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);

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

react-native 完整實現登錄功能的示例代碼

推薦度：

點擊下載本文 文檔為doc格式

標簽：代碼 React native

熱門焦點

react-native 完整實現登錄功能的示例代碼

react-native 完整實現登錄功能的示例代碼

react-native 完整實現登錄功能的示例代碼

最新推薦

猜你喜歡

熱門推薦