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

 <!--加入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>

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', },});

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

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', },});

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;

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

/** * 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} />    }}    />  ); }};

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