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的用法一致，除此之外，还包含了其他的一些属性，请参照属性表，

PropsProp                        | 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 buttononErrorPress                | func   | Yes      |                    | Click event of error page buttonemptyImgSource              | source | Yes      |                    | Image of empty page showerrorImgSource              | source | Yes      |                    | Image of error page showemptyText                   | string | Yes      |         ""         | Text of empty page descerrorText                   | string | Yes      |         ""         | Text of error page descemptyBtnText                | string | Yes      |         ""         | Text of empty page button,Display when it is not empty,

Default does not displayerrorBtnText                | string | Yes      |         ""         | Text of error page button,Display when it is not empty,

Default does not displayemptyTextStyle              | style  | Yes      |                    | The style of empty page texterrorTextStyle              | style  | Yes      |                    | The style of error page textemptyButtonStyle            | style  | Yes      |                    | The style of empty page buttonerrorButtonStyle            | style  | Yes      |                    | The style of error page buttonemptyBgColor                | color  | Yes      |                    | The backgroundcolor of empty pageerrorBgColor                | color  | Yes      |                    | The backgroundcolor of error pageinitHint                    | string | Yes      |                    | Hint of init page ActivityIndicatorloadingHint                 | string | Yes      |                    | Hint of loading page ActivityIndicatorinitHintStyle               | style  | Yes      |                    | The style of init page initHintloadingHintStyle            | style  | Yes      |                    | The style of loading page loadingHintinitIndicatorColor          | color  | Yes      |                    | The color of init page ActivityIndicatorloadingIndicatorColor       | color  | Yes      |                    | The color of loading page ActivityIndicatorinitContainerBgColor        | color  | Yes      |                    | The backgroundcolor of init page ActivityIndicator containerinitContainerBgColor        | color  | Yes      |                    | The backgroundcolor of loading page ActivityIndicator container

3、在项目中使用multiview包裹当前的界面UI，

 render() {        let that = this;        return (            <MultiView status={that.state.status} emptyBgColor="white" errorBgColor="white" emptyText="你还没有添加商品呦"                       errorText="网络错误">                <View style={styles.container}>                    ...                </View>            </MultiView>        );    

PageStatus一共有5种状态，

1. PageStatus.init  一般是进入页面初始化的时候使用
   
   
2. PageStstus.content 就是显示页面的内容
   
   
3. PageStatus.empty 当页面接在为空，比如收藏夹或者商品列表为空的时候使用
   
   
4. PageStatus.error 当网络错误或者页面加载失败的时候使用
   
   
5. PageStatus.loading 当页面需要刷新的时候使用
   
   当然，多图层中颜色，背景，icon和提示文字都可以进行定制，有什么建议和意见欢迎@

原创博客，欢迎转载！