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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
基于Vue CSR的微前端实现方案实践
May 27 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
php 过滤危险html代码
2009/06/29 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python守护进程用法实例分析
2015/06/04 Python
详解python3百度指数抓取实例
2016/12/12 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python探索之创建二叉树
2017/10/25 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python异常处理操作实例详解
2018/08/28 Python
django做form表单的数据验证过程详解
2019/07/26 Python
在python中修改.properties文件的操作
2020/04/08 Python
使用npy转image图像并保存的实例
2020/07/01 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
介绍一下Linux中的链接
2016/06/05 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
python APScheduler执行定时任务介绍
2022/04/19 Python