（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 (
<MultiView status={that.state.status} emptyBgColor="white"
errorBgColor="white" emptyText="你还没有添加商品呦"
errorText="网络错误">
<View style={styles.container}>
...
</View>
</MultiView>
);
}
PageStatus一共有5种状态，
PageStatus.init 一般是进入页面初始化的时候使用PageStstus.content 就是显示页面的内容
PageStatus.empty 当页面接在为空，比如收藏夹或者商品列表为空的时候使用
PageStatus.error 当网络错误或者页面加载失败的时候使用
PageStatus.loading 当页面需要刷新的时候使用
原创博客，欢迎转载！
