React-Native 之项目实战(二)

前言

本文有配套视频，可以酌情观看。
文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。
文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。
如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。
转载麻烦注明出处，谢谢。

本篇资源：链接: https://pan.baidu.com/s/1i4HFmeT 密码: yy79

源码托管到 github 上，需要源码的点我下载，喜欢的话记得 Star，谢谢！

属性声明和属性确定

有朋友反馈这边 属性声明和属性确定 不了解，这边就来补充一下。
在 React-Native 创建的自定义组件是可以复用的，而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件，为了让开发人员之间减少沟通成本，我们会对某些必要的属性进行属性声明，让使用的人知道需要传入什么！甚至有些需要传入但没有传入值的属性我们会进行警告处理！
这边先来看下属性声明的示例：

	static propTypes = {
		name:PropTypes.string,
		ID:PropTypes.number.isRequired,
	}

上面我们声明了 name 和 ID 两个属性，并且进行了属性的确认，其中，'isRequired' 表示如果不传递这个属性，那么开发阶段中，系统会出现警告，让我们对其进行属性确认，也就是说是否为必须属性。

属性确认语法分为：

属性为任何类型

	React.PropTypes.any

属性是否是 JavaScript 基本类型

	React.PropTypes.array;
	React.PropTypes.func;
	React.PropTypes.bool;
	React.PropTypes.number;
	React.PropTypes.object;
	React.PropTypes.string;

属性是某个 React 元素

	React.PropTypes.element;

属性为几个特定的值

	React.PropTypes.oneOf(['value1', 'value2'])

属性为指定类型中的一个

	React.PropTypes.oneOfType([
		React.PropTypes.node,
		React.PropTypes.number,
		React.PropTypes.string
	])

属性为可渲染的节点

	React.PropTypes.node;

属性为某个指定类的实例

	React.PropTypes.instanceOf(NameOfClass);

属性为指定类型的数组

	React.PropTypes.arrayOf(React.PropTypes.string)

属性有一个指定的成员对象

	React.PropTypes..objectOf(React.PropTypes.number)

属性是一个指定构成方式的对象

	React.PropTypes.shape({
		color:React.PropTypes.stirng,
		fontSize:React.PropTypes.number
	})

属性默认值（当我们没有传递属性的时候使用）

	static defaultProps = {
		name:'苍井空'
	};

占位图

开发中，我们会有许多图片都是从网络进行请求的，但是，如果出现网络卡顿的情况，图片就会迟迟不出现，又或者有的并没有图片，这样图片就为空白状态；为了不让用户感觉太突兀影响用户体验，也为了视图整体性，一般我们会选择使用占位图先展示给用户看，等到图片加载完毕再将图片展示出来。
这边我们需要对cell内部进行一些处理。

	 {/* 左边图片 */}
     <Image source={{uri:this.props.image === '' ? 'defaullt_thumb_83x83' : this.props.image}} style={styles.imageStyle} />

无数据情况处理

还是网络问题，在网络出现问题或者无法加载数据的时候，一般我们会展示空白页，在空白页中提示 无数据 之类的提示，比较好的还会使用 指示器 的方式告诉用户网络出现问题等等。
这边我们做以下处理，当无数据时，我们就先初始化基础界面，然后展示 提示 页面，等到有数据时，再重新渲染数据。
首先设置 无数据 页面

	import React, { Component } from 'react';
	import {
    	StyleSheet,
    	View,
    	Text,
	} from 'react-native';
	export default class GDNoDataView extends Component {
    	render() {
        	return(
            	<View style={styles.container}>
                	<Text style={styles.textStyle}>无数据	</Text>
            	</View>
        	);
    	}
	}
	const styles = StyleSheet.create({
    	container: {
        	flex:1,
        	justifyContent:'center',
        	alignItems:'center',
    	},
    	textStyle: {
        	fontSize:21,
        	color:'gray'
    	}
	});

接着，没有数据的时候我们进行一些处理就可以了

	// 根据网络状态决定是否渲染 listview
    renderListView() {
        if (this.state.loaded === false) {
            return(
                <NoDataView />
            );
        }else {
            return(
                <PullList
                    onPullRelease={(resolve) => this.fetchData(resolve)}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    showsHorizontalScrollIndicator={false}
                    style={styles.listViewStyle}
                    initialListSize={5}
                />
            );
        }
    }

listView 头部设置

根据原版效果发现 提示标题 应该放到 ListView 的头部才对，所以这边就做下小修改。

	<ListView
             dataSource={this.state.dataSource}
             renderRow={this.renderRow}
             showsHorizontalScrollIndicator={false}
             style={styles.listViewStyle}
             initialListSize={5}
             renderHeader={this.renderHeader}
   />

renderHeader 方法实现

	// 返回 listview 头部
    renderHeader() {
        return (
            <View style={styles.headerPromptStyle}>
                <Text>根据每条折扣的点击进行统计,每5分钟更新一次</Text>
            </View>
        );
    }

下拉刷新

为了避免适配问题带来的麻烦，这边我们采用第三方框架 react-native-pull 实现下拉刷新和上拉加载更多的功能。

	<PullList
            onPullRelease={(resolve) => this.fetchData(resolve)}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            showsHorizontalScrollIndicator={false}
            style={styles.listViewStyle}
            initialListSize={5}
            renderHeader={this.renderHeader}
   />

fetchData 方法修改

	// 网络请求
    fetchData(resolve) {
        setTimeout(() => {
            fetch('http://guangdiu.com/api/gethots.php')
                .then((response) => response.json())
                .then((responseData) => {
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                        loaded:true,
                    });
                    if (resolve !== undefined){
                        setTimeout(() => {
                            resolve();	// 关闭动画
                        }, 1000);
                    }
                })
                .done();
        });
    }

网络请求之POST（重要）

GET 和 POST 是我们请求 HTTP 接口常用的方式，针对表单提交的请求，我们通常采用 POST 的方式。
在 JQuery 中，传入对象框架会自动封装成 formData 的形式，但是在 fetch 中没有这个功能，所以我们需要自己初始化一个 FormData 直接传给 body (补充：FormData也可以传递字节流实现上传图片功能)。

	let formData = new FormData();
	formData.append("参数", "值");
	formData.append("参数", "值");
	fetch(url, {
		method:'POST,
		headers:{},
		body:formData,
		}).then((response)=>{
			if (response.ok) {
				return response.json();
			}
		}).then((json)=>{
			alert(JSON.stringify(json));
		}).catch.((error)=>{
			console.error(error);
		})

如果想详细了解 Fetch ，可以点击 React Native 之网络请求查看。

首页模块

这边我们按照前面提到的步骤，进行数据的加载。

	import React, { Component } from 'react';
	import {
    	StyleSheet,
    	Text,
    	View,
    	TouchableOpacity,
    	Image,
	    ListView,
	    Dimensions
	} from 'react-native';
	// 第三方
	import {PullList} from 'react-native-pull';
	const {width, height} = Dimensions.get('window');
	// 引用外部文件
	import CommunalNavBar from '../main/GDCommunalNavBar';
	import CommunalHotCell from '../main/GDCommunalHotCell';
	import HalfHourHot from './GDHalfHourHot';
	import Search from './GDSearch';
	export default class GDHome extends Component {
	    // 构造
	    constructor(props) {
	        super(props);
	        // 初始状态
	        this.state = {
	            dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
	            loaded:true,
	        };
	        this.fetchData = this.fetchData.bind(this);
	    }
	    // 网络请求
	    fetchData(resolve) {
	        let formData = new FormData();
	        formData.append("count", "30");
	        setTimeout(() => {
	            fetch('http://guangdiu.com/api/getlist.php', {
	                method:'POST',
	                headers:{},
	                body:formData,
	            })
	            .then((response) => response.json())
	            .then((responseData) => {
	                this.setState({
	                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
	                    loaded:true,
	                });
	                if (resolve !== undefined){
	                    setTimeout(() => {
	                        resolve();
	                    }, 1000);
	                }
	            })
	            .done();
	        });
	    }
	    // 跳转到近半小时热门
	    pushToHalfHourHot() {
	        this.props.navigator.push({
	            component: HalfHourHot,
	        })
	    }
	    // 跳转到搜索
	    pushToSearch() {
	        this.props.navigator.push({
	            component:Search,
	        })
	    }
	    // 返回左边按钮
	    renderLeftItem() {
	        return(
	            <TouchableOpacity
	                onPress={() => {this.pushToHalfHourHot()}}
	            >
	                <Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} />
	            </TouchableOpacity>
	        );
	    }
	    // 返回中间按钮
	    renderTitleItem() {
	        return(
	            <TouchableOpacity>
	                <Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} />
	            </TouchableOpacity>
	        );
	    }
	    // 返回右边按钮
	    renderRightItem() {
	        return(
	            <TouchableOpacity
	                onPress={()=>{this.pushToSearch()}}
	            >
	                <Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} />
	            </TouchableOpacity>
	        );
	    }
	    // 根据网络状态决定是否渲染 listview
	    renderListView() {
	        if (this.state.loaded === false) {
	            return(
	                <NoDataView />
	            );
	        }else {
	            return(
	                <PullList
	                    onPullRelease={(resolve) => this.fetchData(resolve)}
	                    dataSource={this.state.dataSource}
	                    renderRow={this.renderRow}
	                    showsHorizontalScrollIndicator={false}
	                    style={styles.listViewStyle}
	                    initialListSize={5}
	                    renderHeader={this.renderHeader}
	                />
	            );
	        }
	    }
	    // 返回每一行cell的样式
	    renderRow(rowData) {
	        return(
	            <CommunalHotCell
	                image={rowData.image}
	                title={rowData.title}
	            />
	        );
	    }
	    componentDidMount() {
	        this.fetchData();
	    }
	    render() {
	        return (
	            <View style={styles.container}>
	                {/* 导航栏样式 */}
	                <CommunalNavBar
	                    leftItem = {() => this.renderLeftItem()}
	                    titleItem = {() => this.renderTitleItem()}
	                    rightItem = {() => this.renderRightItem()}
	                />
	                {/* 根据网络状态决定是否渲染 listview */}
	                {this.renderListView()}
	            </View>
	        );
	    }
	}
	const styles = StyleSheet.create({
	    container: {
	        flex: 1,
	        alignItems: 'center',
	        backgroundColor: 'white',
	    },
	    navbarLeftItemStyle: {
	        width:20,
	        height:20,
	        marginLeft:15,
	    },
	    navbarTitleItemStyle: {
	        width:66,
	        height:20,
	    },
	    navbarRightItemStyle: {
	        width:20,
	        height:20,
	        marginRight:15,
	    },
	    listViewStyle: {
	        width:width,
	    },
	});

OK，这边也已经成功拿到数据，所以接着就是完成 cell 样式部分就可以了。

效果：

navigator 跳转动画

有时候我们需要在跳转的时候使用不同的跳转动画,比如我们 半小时热门 的跳转方式在 iOS 内叫模态跳转，特性就是当页面退出后会直接销毁，多用于注册、登录等不需要常驻内存的界面。
react-native 中为了方便实现这样的功能，我们可以在初始化 Navigator 的时候，在 ‘configsSence’ 中进行操作；具体操作如下：


// 设置跳转动画
configureScene={(route) => this.setNavAnimationType(route)}
// 设置Navigator跳转动画
    setNavAnimationType(route) {
        if (route.animationType) {  // 有值
            return route.animationType;
        }else {
            return Navigator.SceneConfigs.PushFromRight;
        }
    }

这样我们在需要跳转的地方只需要传入相应的参数即可。


	// 跳转到近半小时热门
	    pushToHalfHourHot() {
	        this.props.navigator.push({
	            component: HalfHourHot,
	            animationType:Navigator.SceneConfigs.FloatFromBottom
	        })
	    }

关闭 Navigator 返回手势

上面操作后，发现这边有个小细节就是我们使用了 `` 作为跳转动画，但是当我们下拉的时候，动画中默认附带的 返回手势 会干扰我们 ListView 的滑动手势，这个怎么解决呢？其实很简单，我们只要关闭Navigator 手势就可以了嘛,怎么关闭呢？其实在源码中我们可以找到，手势包含在动画中，我们如果不需要，只需要给其赋值为 null ，这样它就不知道需要响应手势事件了，方法如下：


	// 设置Navigator跳转动画
    setNavAnimationType(route) {
        if (route.animationType) {  // 有值
            let conf = route.animationType;
            conf.gestures = null;   // 关闭返回手势
            return conf;
        }else {
            return Navigator.SceneConfigs.PushFromRight;
        }
    }

这样我们就成功关闭了 Navigator 手势功能。

上拉加载更多

react-native-pull 框架的上拉加载使用也很简单，配合 onEndReached、onEndReachedThreshold、renderFooter 使用

	loadMore() {
        // 数据加载操作
    }
    renderFooter() {
        return (
            <View style={{height: 100}}>
                <ActivityIndicator />
            </View>
        );
    }
    // 根据网络状态决定是否渲染 listview
    renderListView() {
        if (this.state.loaded === false) {
            return(
                <NoDataView />
            );
        }else {
            return(
                <PullList
                    onPullRelease={(resolve) => this.fetchData(resolve)}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    showsHorizontalScrollIndicator={false}
                    style={styles.listViewStyle}
                    initialListSize={5}
                    renderHeader={this.renderHeader}
                    onEndReached={this.loadMore}
                    onEndReachedThreshold={60}
                    renderFooter={this.renderFooter}
                />
            );
        }
    }

网络请求基础封装

到这里，相信各位对 React-Native 有所熟悉了吧，从现在开始我们要慢慢往实际的方向走，这边就先从网络请求这部分开始，在正式开发中，网络请求一般都单独作为一部分，我们在需要使用的地方只需要简单调用一下即可，这样做的好处是让整个工程的结构更加清晰，让组件们各司其职，只管好自己该管的事，并且后期维护成本也会相应降低。
首先，我们要先对 fetch 的 GET 和 POST 请求方式进行一层基础封装，也就是要把它们单独独立出来，那么这边先来看下 GET 这边：

	var HTTPBase = {};
	/**
	 *
	 * GET请求
	 *
	 * @param url
	 * @param params {}包装
	 * @param headers
	 *
	 * @return {Promise}
	 *
	 * */
	HTTPBase.get = function (url, params, headers) {
	    if (params) {
	        let paramsArray = [];
	        // 获取 params 内所有的 key
	        let paramsKeyArray = Object.keys(params);
	        // 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
	        paramsKeyArray.forEach(key => paramsArray.push(key + '=' + params[key]));
	        // 网址拼接
	        if (url.search(/\?/) === -1) {
	            url += '?' + paramsArray.join('&');
	        }else {
	            url += paramsArray.join('&');
	        }
	    }
	    return new Promise(function (resolve, reject) {
	        fetch(url, {
	            method:'GET',
	            headers:headers
	        })
	            .then((response) => response.json())
	            .then((response) => {
	                resolve(response);
	            })
	            .catch((error) => {
	                reject({status:-1})
	            })
	            .done();
	    })
	}

好，这边我们 GET 就封装好了，简单使用一下：

	fetchData(resolve) {
        HTTPBase.get('http://guangdiu.com/api/gethots.php')
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                    loaded:true,
                });
                if (resolve !== undefined){
                    setTimeout(() => {
                        resolve();  // 关闭动画
                    }, 1000);
                }
            })
            .catch((error) => {
            })
    }
    export default HTTPBase;

接着，我们继续来对 POST 进行封装：

	/**
	 *
	 * POST请求
	 *
	 * @param url
	 * @param params {}包装
	 * @param headers
	 *
	 * @return {Promise}
	 *
	 * */
	HTTPBase.post = function (url, params, headers) {
	    if (params) {
	        // 初始化FormData
	        var formData = new FormData();
	        // 获取 params 内所有的 key
	        let paramsKeyArray = Object.keys(params);
	        // 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
	        paramsKeyArray.forEach(key => formData.append(key, params[key]));
	    }
	    return new Promise(function (resolve, reject) {
	        fetch(url, {
	            method:'POST',
	            headers:headers,
	            body:formData,
	        })
	            .then((response) => response.json())
	            .then((response) => {
	                resolve(response);
	            })
	            .catch((error) => {
	                reject({status:-1})
	            })
	            .done();
	    })
	}
	export default HTTPBase;

好，来试一下：

	// 网络请求
    fetchData(resolve) {
        let params = {"count" : 5 };
        HTTPBase.post('http://guangdiu.com/api/getlist.php', params)
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                    loaded:true,
                });
                if (resolve !== undefined){
                    setTimeout(() => {
                        resolve();
                    }, 1000);
                }
            })
            .catch((error) => {
            })
    }

这次篇幅有点短，实在是太忙了！

React-Native 之项目实战(二)的更多相关文章

React Native 之项目实战（一）
前言本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...
React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js /** * 主页面 */ import React, { Component } from 'react'; import { StyleSheet, Text, View, Im ...
React Native商城项目实战02 - 主要框架部分(tabBar)
1.安装插件,cd到项目根目录下执行: $ npm i react-native-tab-navigator --save 2.主框架文件Main.js /** * 主页面 */ import Rea ...
React Native商城项目实战01 - 初始化设置
1.创建项目 $ react-native init BuyDemo 2.导入图片资源安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工 ...
React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...
React Native商城项目实战05 - 设置首页的导航条
1.Home.js /** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Te ...
React Native商城项目实战06 - 设置安卓中的启动页
1.Main 目录下新建LaunchImage.js: /** * 启动页 */ import React, { Component } from 'react'; import { AppRegis ...
React Native商城项目实战03 - 包装Navigator
1.在Home目录下新建首页详细页HomeDetail.js /** * 首页详情页 */ import React, { Component } from 'react'; import { App ...
React Native商城项目实战16 - 购物中心详细页
逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据: ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCent ...
React Native商城项目实战15 - 首页购物中心
1.公共的标题栏组件TitleCommonCell.js /** * 首页购物中心 */ import React, { Component } from 'react'; import { AppR ...

随机推荐

js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))
( function(){…} )() ( function (){…} () ) 是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达 ...
地图学与GIS制图的基础理论（一）
说到地图制作,很多人第一时间就会跟地图学进行挂钩.是的,地图学的很多理论和知道思想都非常适合基于GIS制图.可以说,利用GIS进行电子地图制作,其实也属于地图学的一小部分. 地图学是研究地图的理论.地 ...
Java实现二叉树的前序、中序、后序遍历（非递归方法）
在上一篇博客中,实现了Java中二叉树的三种遍历方式的递归实现,接下来,在此实现Java中非递归实现二叉树的前序.中序.后序遍历,在非递归实现中,借助了栈来帮助实现遍历.前序和中序比较类似,也简单 ...
Jenkins权限配置失误后导致登录失败的解决办法
为了便于管理,Jenkins一般需要设置用户,而且这些用户是需要配置相应的权限的,如果一不小心配置的时候出了问题,那么,你就斯巴达了. 这里,用我的切身经历,为大家说一下Jenkins因为权限配置失误 ...
R语言爬虫 rvest包 html_text()-html_nodes() 原理说明
library(rvest) 例子网页:http://search.51job.com/jobsearch/search_result.php?fromJs=1&jobarea=010000% ...
xml类型转换列表显示 SQL查询
数据库中存在字段类型为xml 的数据, 现举例 xml 字段存储的数据为: <MortgageInfoShipList> <ITEMS> <ITEM> <Sh ...
node将excel内容转json
小颖分享的这个方法,前提是你已经安装了node,如果大家不知道自己是否安装过node可以打开cmd,然后执行:node -v,如果安装过,你会看到你安装的node版本号,如果没有安装请先安装node. ...
dev控件chart简单实现多图例，双曲线，双柱图，曲线与柱图
1.效果图 2.数据源代码: ; i < ; i++) { == ) { dt1.Rows.Add( * i); dt2.Rows.Add( * i+); } else { dt1.Rows.A ...
JavaScript 基本类型值-Number类型
▓▓▓▓▓▓ 大致介绍在JavaScript的内部采用IEEE754格式来表示数字,所以不区分整数和浮点数,都是用64位浮点数的形式储存.就是说,在JavaScript内部,就根本没有小数.但是有些 ...
Ajax封装函数笔记
Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...

React-Native 之 项目实战(二)

前言

属性声明和属性确定

占位图

无数据情况处理

listView 头部设置

下拉刷新

网络请求之POST（重要）

首页模块

navigator 跳转动画

关闭 Navigator 返回手势

上拉加载更多

网络请求基础封装

React-Native 之 项目实战(二)的更多相关文章

随机推荐

热门专题

React-Native 之项目实战(二)

React-Native 之项目实战(二)的更多相关文章