react-native 完整实现登录功能
2017-04-28 12:43
676 查看
React Native write login , UI framework , network , navagate, click event.
Refer : http://blog.csdn.net/u012915455/article/details/52594091
if the server is springmvc need as below configuration.
.1 Main logic:
introduce:
1.use Linearlayout from top to below is Image,EditView,LoginButton,Text
2.EditView and LoginButton is self component,write input and button frame;
.2 EditView.js
introduce:
1.use onChangeText that the method of textInput get input data,EditView 传入的onChangeText回调方法,把数据回调出封装的EditView,在外部获取到TextInput输入的数据。
.3 LoginButton.js
说明:
1.利用TouchableOpacity包住Text实现点击效果,onPress是点击时调用,当点击时onPress触发,调用外部传入的onPressCallback 方法实现触发事件在封装的LoginButton外部定义触发的效果。
.4 NetUtil.js
说明:网络方法,依次传入请求地址,请求参数,成功回调事件
.7 LoginSuccess.js
说明:登录成功后跳转的界面
8.navigator.js
导航器控制类。利用name,component 实现导航(可以自己随便定义命名,只要后面的类中访问同样的命名即可,课参考LoginSuccess.js 中的返回功能)
8.index.android.js
规定的类
Refer : http://blog.csdn.net/u012915455/article/details/52594091
if the server is springmvc need as below configuration.
<!--insert multipart compile,this is important,be used in get the upload file in 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 Main logic:
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(); }) }; //redirect to next page onLoginSuccess(){ const { navigator } = this.props; if (navigator) { navigator.push({ name : 'LoginSuccess', component : LoginSuccess, }); } } } class loginLineView extends Component { render() { return ( <Text > no address </Text> ); } } const LoginStyles = StyleSheet.create({ loginview: { flex: 1, padding: 30, backgroundColor: '#ffffff', }, });
introduce:
1.use Linearlayout from top to below is Image,EditView,LoginButton,Text
2.EditView and LoginButton is self component,write input and button frame;
.2 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, }, });
introduce:
1.use onChangeText that the method of textInput get input data,EditView 传入的onChangeText回调方法,把数据回调出封装的EditView,在外部获取到TextInput输入的数据。
.3 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外部定义触发的效果。
.4 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} /> }} /> ); } };
8.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);
相关文章推荐
- react-native 完整实现登录功能的示例代码
- react-native 完整实现登录功能
- react-native 完整实现登录功能
- React Native实战项目企业通信录(含视频教程)- 登录功能实现
- React-Native实现登录页面,并显示和清除用户的输入
- 3、React Native实战——实现QQ的登录界面
- jsp+javaBean+servlet+mysql完整的实现一个登录功能
- ReactNative实现图集功能
- React-Native 之 GD (十八)监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用
- React-Native进阶_7.TextInput的使用实现搜索功能
- react-native 实现上传功能
- React-Native使用Mobx实现购物车功能
- react native 学习之模仿”探探“实现豆瓣电影app部分功能
- react native开发:实现点击左侧选择项,右侧显示内容的功能
- React-Native学习笔记之:实现简单地登录页面
- 超详细asp.net实现一个完整的登录功能
- React-Native 实现QQ登录界面
- 完整使用SSM框架(Spring SpringMVC Mybatis)搭建web服务器实现登录功能