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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
微信小程序登录session的使用
Mar 17 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实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
jquery 插件学习(一)
2012/08/06 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
学生会竞选自荐信
2013/10/12 职场文书
学生会主席竞聘书
2014/03/31 职场文书
公路绿化方案
2014/05/12 职场文书
关于安全的标语
2014/06/10 职场文书
2014年卫生工作总结
2014/11/27 职场文书
四年级学生期末评语
2014/12/26 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL