react-native
前段时间公司项目比较赶, 没时间写文章, 这两天闲下来了, 总结了一下, 写了一篇比较综合的UI项目, 登录注册模块, 包含UI 网络请求等功能, 希望对大家理解
React Native的界面布局和网络请求有一定的帮助.
项目可到github下载: https://github.com/YTiOSer/YTReact-Native_LoginUI
1.头文件
这个项目中用到了多个UI控件和导航, 所以需要引入多个控件和React Navigation,导航的使用方法上篇文章已经讲述, 这里就不再讲了,代码如下所示:
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import ButtonView from './ButtonView';
import RegistView from './regist/RegistView';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
Button,
Alert,
Fetch,
Dimensions,
} from 'react-native';
2. 封装控件
项目中针对按钮ButtonView进行了封装, 页面中使用的按钮都可以使用封装的控件, 这样方便管理和使用, 代码在ButtonView.js目录下, 具体封装代码如下:
export default class ButtonView extends React.Component {
static defaultProps = {
btnName: 'Button',
underlayColor: 'gray',
};
constructor(props) {
super(props);
}
render() {
return (
<View style = {styles.container}>
<TouchableHighlight
style={[styles.btnDefaultStyle,this.props.btnStyle,styles.center]}
activeOpacity={0.5}
underlayColor={this.props.underlayColor}
onPress={this.props.onPress}>
<Text style={[styles.textDefaultStyle, this.props.textStyle]}>{this.props.btnName}</Text>
</TouchableHighlight>
</View>
);
}
}
3. 宏定义字段
项目开发中经常会使用到当前设备的屏幕宽高, 或者自定义常使用的字段, 这时候统一定义成宏方便使用.
const {width, height} = Dimensions.get('window');
const SCREEN_WIDTH = width;
const PWRightWid = 100;
4. 定义绑定事件
在登录注册页面中, 我们经常需要获取到登录的用户名,密码,验证码,手机号等字段, 这时候在React Native中就需要定义对应的字段绑定后来获取.
this._getUserName = this._getUserName.bind(this); //获取用户名
this._getUserPW = this._getUserPW.bind(this); //获取密码
this._onClickLogin = this._onClickLogin.bind(this); //登录
this._getPhoneCode = this._getPhoneCode.bind(this); //获取验证码
this._onClickSIM = this._onClickSIM.bind(this); //点击切换账号手机号登录
this._onClickForgetPW = this._onClickForgetPW.bind(this); //点击忘记密码
this._hiddenGetCodeBtn = this._hiddenGetCodeBtn.bind(this); //隐藏获取验证码
5. 码UI点击事件处理
页面肯定需要码UI, 代码比较简单, 只是控件使用和布局, 这里就不过多讲, 这里详细介绍下对应的点击事件处理, 每个按钮的 onPress 和输入框的 onChangeText中都要进行处理, 来获取对应的值和逻辑处理.
(1). 首先需要在控件中定义点击事件和协议
TextInput输入框控件, 可以使用onChangeText 来获取输入的内容:
<TextInput style={styles.inputViewStyle}
onChangeText = {(text) => {
this.setState({userName: text});
}}
placeholder="请输入手机号"
/>
Button按钮, 可以使用 onPress 来处理点击事件:
<ButtonView
btnName='获取验证码'
btnStyle = {{width: 90,marginRight: 10, backgroundColor: '#D6D6D6'}}
onPress = {this._getPhoneCode}
textStyle = {{color:'gray', justifyContent: 'flex-end',}}
></ButtonView>
(2). 处理事件
TextInput使用onChangeText,获取对应输入的值:
_getUserName = () => {
alert('A name was submitted: ' + this.state.userName);
};
Button使用onPress响应点击事件:
_onClickLogin = () => {
var usrInfo = "用户名：" + this.state.userName + "密码：" + this.state.userPW
Alert.alert(usrInfo);
};
6. 网络请求
本项目是基于登录来介绍, 在获取到对应的用户名密码或手机号验证码后, 需要请求接口传给后台来进行验证登录, 这里给大家介绍下fetch网络请求, 使用方便,简单易懂, 大家新手可以先使用这个, 后续介绍其它的方法.
getUsrInfo = () => {
fetch('http://...')
.then((response) => response.json())
.then((responseJson) => {
this.state.userName = responseJson.status.code;
this.state.userPW = responseJson.status.msg;
this.setState({'userName':responseJson.status.code, 'userPW':responseJson.status.msg});
return "responseJson.movies";
})
.catch((error) => {
console.error(error);
});
}
7. 注册
因为登录页面需要使用到注册, 所以需要使用导航控制器来进行跳转, 这个上篇文章已经详细介绍过, 这里使用了RootView和自定义的RegistView.
export default createStackNavigator({
Home: {
screen: RootView
},
Details:{
screen: RegistView
},
});
正常的注册页面和登录其实逻辑相似, 所以在项目中我就想再介绍一个知识, 就是在注册页面中, 为大家介绍下FlatList使用自定义cell的情况.
(1)创建RegistCell
//创建RegistCell
export default class RegistCell extends React.Component {
constructor(props) {
super(props);
}
render() {
// const {name, full_name} = this.props.item.item || {};
let name = this.props.item.item.name;
let full_name = this.props.item.item.owner.node_id;
console.log(`===>message cell props, ${name}, ${full_name}`, this.props.item.item)
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => console.log('item clicked')}
style={styles.touchable}>
<View style={styles.touchableInside}>
<Image
source={require('./img/graphql_wx.jpg')}
style={styles.image}
resizeMode={Image.resizeMode.stretch} />
<View style={styles.insideView}>
<Text style={styles.insideText}>{name}</Text>
<Text style={styles.insideText}>{full_name}</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
}
}
(2)创建完cell后, renderItem注册cell.
renderItem = (item) => (
<RegistCell item={item} />
)
(3)创建FlatList,调用自定义RegistCell
render() {
return (
<View style={styles.container}>
<Text>Message</Text>
<FlatList
data={this.state.data || []}
renderItem={this.renderItem}
keyExtractor={item => item.id}
// onRefresh={this.handleRefresh}
onEndReachedThreshold={0} />
</View>
);
}
简单的三步即可实现使用FlatList并自定义cell.
到这里, 基于 React Navigation 的登录注册页面的所有地方就完成了, 想看详细代码和运行效果的可到GitHub下载代码: https://github.com/YTiOSer/YTReact-Native_LoginUI, 里面有完整的代码.
您的支持是我的动力, 如果对您有所帮助的话, 不妨给个喜欢和关注哈!
网友评论