大佬教程收集整理的这篇文章主要介绍了react-native 完整实现登录功能的示例代码,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
React Native实现登录功能,包括ui的封装、网络请求的封装、导航器的实现、点击事件。
后台如果是springmvc实现的需要配置上如下代码
<property name="maxUploadSize" value="102400"></property>
<property name="defaultEncoding" value="utf-8"/><!--属性:编码-->
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 为自定义控件,实现输入框,和按钮的封装。
render() {
return (
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输入的数据。
logintext: {
color: '#ffffff',fontWeight: 'bold',width:30,logintextView: {
marginTop: 10,BACkgroundColor: '#3281DD',flexDirection: 'row',alignItems:'center',});
说明:
1.利用TouchabLeopacity包住Text实现点击效果,onPress是点击时调用,当点击时onPress触发,调用外部传入的onPressCallBACk 方法实现触发事件在封装的LoginButton外部定义触发的效果。
fetch(url,fetchOptions)
.then((responsE) => response.text())
.then((responseText) => {
// callBACk(JSON.parse(responseText));
callBACk(responseText);
}).done();
},}
export default NetUtil;
说明:网络方法,依次传入请求地址,请求参数,成功回调事件
}
//回到第一个页面去
onJump(){
const { navigator } = this.props;
if (navigator) {
navigator.pop();
}
}
render(){
return (
<View >
<TouchabLeopacity onPress = {this.onJump.bind(this)}>
<Text> 登录成功,点击返回登录页面 </Text>
</TouchabLeopacity>
</View>
);
}
}
说明:登录成功后跳转的界面
导航器控制类。利用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
规定的类
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的react-native 完整实现登录功能的示例代码全部内容,希望文章能够帮你解决react-native 完整实现登录功能的示例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。