react-native 로그 인 기능 을 완전 하 게 실현 하 는 예제 코드

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.실 현 된 인터페이스

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.Touchable Opacity 를 이용 하여 Text 를 감 싸 서 클릭 효 과 를 실현 합 니 다.onPress 는 클릭 할 때 호출 됩 니 다.클릭 할 때 onPress 가 트리거 되 고 외부 에서 들 어 오 는 onPress Callback 방법 으로 트리거 이벤트 가 봉 인 된 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 를 이용 하여 네 비게 이 션 을 실현 합 니 다.

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

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.