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

更新时间：2017年09月11日 14:45:51 作者：mangues

本篇文章主要介绍了react-native 完整实现登录功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

react native实现登录功能，包括ui的封装、网络请求的封装、导航器的实现、点击事件。

后台如果是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.主界面的代码实现

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何用react优雅的书写CSS
这篇文章主要介绍了如何用react优雅的书写CSS，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
2021-04-04
React控制元素显示隐藏的三种方法小结
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
解决React报错You provided a `checked` prop&n
这篇文章主要为大家介绍了React报错You provided a `checked` prop to a form field的解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
详解React项目中eslint使用百度风格
这篇文章主要介绍了React项目中eslint使用百度风格,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-09-09
React useEffect的理解与使用
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
2022-12-12
react实现简单的拖拽功能
这篇文章主要为大家详细介绍了react实现简单的拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
react native 文字轮播的实现示例
这篇文章主要介绍了react native 文字轮播的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React中setState使用原理解析
这篇文章主要介绍了React中的setState使用细节和原理解析,主要包括使用setstate的原因及基本用法，本文通过实例代码给大家详细讲解，需要的朋友可以参考下
2022-10-10
React组件间通信的三种方法（简单易用）
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，本文就详细的介绍一下，感兴趣的可以了解一下
2021-10-10
在react中使用highlight.js将页面上的代码高亮的方法
本文通过 highlight.js 库实现对文章正文 HTML 中的代码元素自动添加语法高亮，具有一定的参考价值，感兴趣的可以了解一下
2022-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具