react-native完整實(shí)現(xiàn)登錄功能的示例代碼

react native實(shí)現(xiàn)登錄功能，包括ui的封裝、網(wǎng)絡(luò)請(qǐng)求的封裝、導(dǎo)航器的實(shí)現(xiàn)、點(diǎn)擊事件。

10年積累的網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有南岔免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

demo下載：react-native 完整實(shí)現(xiàn)登錄功能

后臺(tái)如果是springmvc實(shí)現(xiàn)的需要配置上如下代碼

1.實(shí)現(xiàn)的界面

react-native 完整實(shí)現(xiàn)登錄功能的示例代碼

2.完整目錄

react-native 完整實(shí)現(xiàn)登錄功能的示例代碼

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 (

  
   
    
   
   
     {
      this.userName = text;
    }}/>
     {
      this.password = text;
    }}/>
    
    忘記密碼？
   
   
  )
 }


 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 (
    
      沒有帳號(hào)
     
  );
 }
}

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

說(shuō)明：

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 (
   
     {
       this.setState({text});
       this.props.onChangeText(text);
      }
    }
    />
    
  );
 }
}


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,
 },
});

說(shuō)明：

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 (
   
    
      {this.props.name}
    
   
  );
 }
}
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',
 },
});

說(shuō)明：

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;

說(shuō)明：網(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 (

      
        
           登錄成功，點(diǎn)擊返回登錄頁(yè)面 
        
      


    );

  }

}

說(shuō)明：登錄成功后跳轉(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 (
    {
     return Navigator.SceneConfigs.VerticalDownSwipeJump;
    }}
    renderScene={(route,navigator) => {
      let Component = route.component;
      return 
    }}
    />
  );
 }

};

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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：react-native完整實(shí)現(xiàn)登錄功能的示例代碼
本文URL：http://weahome.cn/article/jjpscg.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

react-native完整實(shí)現(xiàn)登錄功能的示例代碼

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管