react-native 完整实现登录功能的示例代码


Posted in Javascript onSeptember 11, 2017

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.实现的界面

react-native 完整实现登录功能的示例代码

2.完整目录

react-native 完整实现登录功能的示例代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 #Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 #Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript 常用功能总结
2012/03/18 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python基于百度云文字识别API
2018/12/13 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
安全生产投入制度
2014/01/29 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
javaScript Array api梳理
2021/03/31 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
nginx 配置缓存
2022/05/11 Servers