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

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

demo下载：

后台如果是springmvc实现的需要配置上如下代码

<property name="maxUploadSize" value="102400"&gt;</property>

<property name="defaultEncoding" value="utf-8"/&gt;<!--属性：编码-->

3.主界面的代码实现

render() {
return (

{ this.userName = text; }}/> { this.password = text; }}/> 忘记密码？ ) }

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 (

没有帐号 ); } }

const LoginStyles = StyleSheet.create({
loginview: {
flex: 1,padding: 30,backgroundColor: '#ffffff',},});

说明：

1.使用了线性布局，从上往下依次Image，EditView，LoginButton，Text

2.EditView和LoginButton 为自定义控件，实现输入框，和按钮的封装。

4.EditView.js

render() {
return (

{ this.setState({text}); this.props.onChangeText(text); } } /> ); } }

const LoginStyles = StyleSheet.create({
TextInputView: {
marginTop: 10,height:50,borderRadius:5,borderWidth:0.3,borderColor:'#000000',flexDirection: 'column',TextInput: {
backgroundColor: '#ffffff',height:45,margin:18,});

说明：

1.利用TextInput的onChangeText 方法获取到输入框中输入的数据，在利用EditView 传入的onChangeText回调方法，把数据回调出封装的EditView，在外部获取到TextInput输入的数据。

5.LoginButton.js

{this.props.name} ); } } const LoginStyles = StyleSheet.create({

loginText: {
color: '#ffffff',fontWeight: 'bold',width:30,loginTextView: {
marginTop: 10,backgroundColor: '#3281DD',flexDirection: 'row',alignItems:'center',});

说明：

1.利用TouchableOpacity包住Text实现点击效果，onPress是点击时调用，当点击时onPress触发，调用外部传入的onPressCallback 方法实现触发事件在封装的LoginButton外部定义触发的效果。

6.NetUtil.js

fetch(url,fetchOptions)
.then((response) => response.text())
.then((responseText) => {
 // callback(JSON.parse(responseText));
  callback(responseText);
}).done();

},}
export default NetUtil;

说明：网络方法，依次传入请求地址，请求参数，成功回调事件

7.LoginSuccess.js

}
//回到第一个页面去
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 中的返回功能）

import React,{ Component } from 'react';
import {
AppRegistry,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

规定的类

Navigator);

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

react-native实现登录 reactnative reactnative登录界面登录登录