React Native多图层View,实现empty,content,error,loading等界面无缝跳转

（1）概述

这是我在github上开源的第二个项目，接触react native以来，在使用的过程中，由于产品的需求，自己封装了一个包含多图层的View，避免重复代码的产生。
react-native-multiview 点击这里到github，先上图

（2）用法

介绍一下用法：主要是提供一个状态，在state中管理这个状态，当然用mobx或者redux也可以！

1、首先，引用该项目在命令行输入

npm install -save react-native-multiview

2、在项目中添加引用

import {MultiView} from "react-native-multiview";
import {PageStatus} from "react-native-multiview";

其中MultiView的用法更React Native中View的用法一致，除此之外，还包含了其他的一些属性，请参照属性表，

Props

Prop	Type	Optional	Default	Description
status	string	Yes	PageStatus.content	status determines the current display of that page, which includes{PageStatus.error,PageStatus.empty, PageStatus.content,PageStatus.init,PageStatus.loading} five status.
onEmptyPress	func	Yes		Click event of empty page button
onErrorPress	func	Yes		Click event of error page button
emptyImgSource	source	Yes		Image of empty page show
errorImgSource	source	Yes		Image of error page show
emptyText	string	Yes	""	Text of empty page desc
errorText	string	Yes	""	Text of error page desc
emptyBtnText	string	Yes	""	Text of empty page button,Display when it is not empty, Default does not display
errorBtnText	string	Yes	""	Text of error page button,Display when it is not empty, Default does not display
emptyTextStyle	style	Yes		The style of empty page text
errorTextStyle	style	Yes		The style of error page text
emptyButtonStyle	style	Yes		The style of empty page button
errorButtonStyle	style	Yes		The style of error page button
emptyBgColor	color	Yes		The backgroundcolor of empty page
errorBgColor	color	Yes		The backgroundcolor of error page
initHint	string	Yes		Hint of init page ActivityIndicator
loadingHint	string	Yes		Hint of loading page ActivityIndicator
initHintStyle	style	Yes		The style of init page initHint
loadingHintStyle	style	Yes		The style of loading page loadingHint
initIndicatorColor	color	Yes		The color of init page ActivityIndicator
loadingIndicatorColor	color	Yes		The color of loading page ActivityIndicator
initContainerBgColor	color	Yes		The backgroundcolor of init page ActivityIndicator container
initContainerBgColor	color	Yes		The backgroundcolor of loading page ActivityIndicator container

3、在项目中使用

render() {

        let that = this;
        return (
            
                
                    ...
                
            
        );
    }

PageStatus一共有5种状态，

PageStatus.init 一般是进入页面初始化的时候使用

PageStstus.content 就是显示页面的内容

PageStatus.empty 当页面接在为空，比如收藏夹或者商品列表为空的时候使用

PageStatus.error 当网络错误或者页面加载失败的时候使用

PageStatus.loading 当页面需要刷新的时候使用

当然，多图层中颜色，背景，icon和提示文字都可以进行定制，有什么建议和意见欢迎@我

原创博客，欢迎转载！