（1）概述
這是我在github上開源的第二個(gè)項(xiàng)目，接觸react native以來(lái)，在使用的過(guò)程中，由于產(chǎn)品的需求，自己封裝了一個(gè)包含多圖層的View，避免重復(fù)代碼的產(chǎn)生。
react-native-multiview 點(diǎn)擊這里到github，先上圖
（2）用法
介紹一下用法：主要是提供一個(gè)狀態(tài)，在state中管理這個(gè)狀態(tài)，當(dāng)然用mobx或者redux也可以！
1、首先，引用該項(xiàng)目在命令行輸入
npm install -save react-native-multiview
2、在項(xiàng)目中添加引用
import {MultiView} from "react-native-multiview";
import {PageStatus} from "react-native-multiview";
其中MultiView的用法更React Native中View的用法一致，除此之外，還包含了其他的一些屬性，請(qǐng)參照屬性表，
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、在項(xiàng)目中使用
render() {
let that = this;
return (
<MultiView status={that.state.status} emptyBgColor="white"
errorBgColor="white" emptyText="你還沒有添加商品呦"
errorText="網(wǎng)絡(luò)錯(cuò)誤">
<View style={styles.container}>
...
</View>
</MultiView>
);
}
PageStatus一共有5種狀態(tài)，
PageStatus.init 一般是進(jìn)入頁(yè)面初始化的時(shí)候使用PageStstus.content 就是顯示頁(yè)面的內(nèi)容
PageStatus.empty 當(dāng)頁(yè)面接在為空，比如收藏夾或者商品列表為空的時(shí)候使用
PageStatus.error 當(dāng)網(wǎng)絡(luò)錯(cuò)誤或者頁(yè)面加載失敗的時(shí)候使用
PageStatus.loading 當(dāng)頁(yè)面需要刷新的時(shí)候使用
原創(chuàng)博客，歡迎轉(zhuǎn)載！
