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

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

demo下载：

后台如果是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);

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