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、在项目中使用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和提示文字都可以进行定制，有什么建议和意见欢迎@

原创博客，欢迎转载！