2. 程式人生 > >react-native 完整實現登錄功能

react-native 完整實現登錄功能

阿新 • • 發佈：2017-10-28
lte framework eat urn 回調 pad 文件 bean ont

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
  • 4
  • 5
  • 6
  • 7
  • 8

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90

說明：
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

說明：
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

說明：
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;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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

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>


        );

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

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

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

};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

8.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);

react-native 完整實現登錄功能

相關推薦

react-native 完整實現登錄功能

lte framework eat urn 回調 pad 文件 bean ont react native實現登錄功能，包括ui的封裝、網絡請求的封裝、導航器的實現、點擊事件。 demo下載：react-native 完整實現登錄功能 後臺如果是springmvc實現的

react-native 完整實現登入功能

react native實現登入功能，包括ui的封裝、網路請求的封裝、導航器的實現、點選事件。 後臺如果是springmvc實現的需要配置上如下程式碼 <!--加入multipart 的解析器,這個必須配置，一會在controller裡抓取上傳

Spring+Hibernate+Struts2整合之實現登錄功能

else ber mit generate public rac err web field 軟件152 劉安民 前端代碼： <form id="loginForm" action="${ pageContext.request.contextPath }/us

Java中利用IO流中的輸入流讀取文件實現登錄功能

use 判斷 body 當前 ole pwd files pre users 1 package object.io; 2 3 import java.io.FileInputStream; 4 import java.io.FileNotFoundEx

輸入賬號 密碼 實現登錄功能

alt win black reg 頁面 div pos 直接 lse 當實現用戶的賬戶和密碼輸入正確之後，頁面跳轉 跳轉 使用window.loacation.href ="網址"， 這個時候 那個登錄的地方有個 賬號和密碼 這個是怎麽做到的呢？ 現在有個方法是：

SSM(maven)項目搭建全過程+實現用戶登錄功能

json mysq earch elm move source you factor nfa 項目創建之前確保eclipse中已經配置好了jdk，tomcat，maven如果沒有配置下面有配置教程的鏈接 　 eclipse中配置jdk的教程url: 　　　　配置tomca

C# 實現模擬登錄功能，實現公共類分享。

login margin amr 獲取cookie esp zh-cn white html gda 前言 最近在研究模擬登錄的各種方法， 主要想要實現的兩個功能是： 1.點擊按鈕可以直接跳轉並登錄到某一個系統中。 2.抓取某一個系統中某一個頁面中的特定數據

用戶登錄功能實現 | Django開發

key code .get response 記錄 出錯 滿足 服務器 保持 處理登錄頁面 # form表單中action對應url反向解析； 1.創建處理登錄頁面視圖，匹配url # 點擊登錄需要對數據進行校驗； 2

android-servlet-mysql實現登錄註冊功能

final 選擇 alt sta 姓名 delete byte[] dsta pstmt 安卓項目圖： 安卓端Get請求服務端登錄代碼： import java.io.BufferedReader;import java.io.InputStream;import

java在線聊天項目1.2版 ——開啟多個客戶端，分別實現數據庫註冊和登錄功能後，成功登陸則登錄框消失，好友列表窗出現

false als blog string def iat ets cat med 登錄框消失語句 dispose(); 好友列表窗出現 使用new FriendsFrame(phone,s); 登陸對話框代碼修改如下： package com.swift.frame;

01: 實現註冊登錄功能

def resp hid end spl pos ces ucc turn 1.1 顯示、隱藏 "登錄/註冊" 相關信息 　　1、此部分實現下面三個功能 　　　　　　功能1：未登錄時在右上角顯示 “登錄/註冊” 菜單 　　　　　　功能2：成功登錄後隱藏 “登錄/註冊” 菜單

Servlet用戶登錄功能實現

ride 數據庫 return class exceptio char drive domain c3p0 需求：完成用戶登錄頁面校驗 第一步：創建一個用戶登錄的html頁面 <!DOCTYPE html> <html> <head>

Flask 【第四篇】使用Flask的擴展實現簡單頁面登錄功能

blog resp login sgd user flask password proc request from flask import Flask,render_template,request,redirect,session app = Flask(__name

ORACLE+Myeclipse+jsp實現簡單登錄功能

public man drivers asus style 編寫 ole 建立 rom Oracle數據庫表的建立： create table Log( 　　 un char(20), pd char(25) ) ta

登錄功能實現

cal ida true can rim off efault 新建 不顯示 新建登錄頁面 在 src/views/auth 新建 Login.vue 文件，復制貼入以下代碼： src/views/auth/Login.vue 1 <template> 2

Servlet結合Html實現登錄驗證(包括驗證碼驗證)功能

next Coding stat tin std 圖片 htm height -c Servlet生成驗證碼並輸出: @WebServlet(name = "yzmServlet") public class yzmServlet extends HttpServlet {

用Cookie實現一天免登錄功能

extend nds sun .html ace name odin 實現 ron Servlet程序: package com.westos.untitle2; import com.westos.untitle2.CityService.UserService; im

Java使用SSM框架實現登錄頁面的驗證碼功能

def ssa bar double trac ext tst setattr info 最終效果展示： 代碼展示： 1、前端登錄頁面代碼展示 <div class="form-group"> <div class="input-ico

Java使用SSM框架實現登錄頁面記住密碼功能

turn 頁面 賦值 ++ mage login ring 實現 member 最終效果展示： 1、登錄頁面JSP代碼 <label class="checkbox"> <input type="checkbox" name="remembe

TP3.2登錄功能實現

ssi sem submit new esp 9.png func form ace 1.產生驗證碼http://blog.csdn.net/lw545034502/article/details/794149832.將表單提交到後臺的驗證方法中（index/checkLo