在App開發中,我們避免不了使用的兩個元件,一個Toast,一個網路載入Loading,在RN開發中,也是一樣,React Native官方並沒有提供者這兩個常用元件,需要開發者自己根據需求來自定義。作者就在其他元件的基礎上在進行二次封裝,使用起來更加簡單,更具擴充套件性,同學們只需將Toast與Loading檔案拖到專案中,install對應的元件庫即可
效果圖
Toast和Loading Demo地址
Demo使用使用到的三方元件
- react-native-root-toast:用來顯示toast
- react-native-root-siblings:用來Loading在App最上層新增檢視
- react-native-vector-icons:IconFont
注意
react-native-vector-icons
需要link 才能使用,同學們需要注意
Toast元件
toast元件這裡作者分類8種不同的使用場景,目前能想到的就這多場景了,後面同學們有其他場景,可以自行新增即可,Toast元件中使用到的Icon圖示,同學們也可以自行修改
- 只顯示最簡單的文字的toast
- 只顯示最簡單的文字的長toast,顯示時長 + 500毫秒
- 顯示success的toast,success的Toast帶有一個成功的對號icon
- 顯示success的toast,支援回撥,使用場景類似於登入成功,顯示1500毫秒toast,然後在回撥函式中跳轉到其他頁面
- 顯示success的長toast,顯示時長 + 500毫秒
- 顯示success的長toast,顯示時長 + 500毫秒,支援回撥,使用場景類似於登入成功,顯示1000毫秒toast,然後跳轉到其他頁面
- 顯示warning的toast,使用場景類似於登入表單,手機號填寫錯誤
- 顯示報錯的toast,使用場景類似於登入表單,提交表單失敗
Loading元件
Loading元件最常用的使用場景就是網路請求時,資料還沒有請求回來之前,頁面最上層顯示一個正在載入的loading框,一來能夠防止使用者在網路請求時又做其他的操作,二來可以給使用者一個更好的體驗,不至於頁面空白,顯得突兀
- loading支援手動呼叫顯示:show()
- 支援手動關閉顯示:hidden()
這裡作者建議使用redux來控制Loading的顯示與隱藏,這樣不用在每一個需要網路請求的頁面都手動去呼叫顯示與隱藏,更高階的Loading使用技巧可以參照作者的React Native開發專案:OneM
Toast核心原始碼
const Toast = {
toast: null,
show: msg => {
this.toast = RootToast.show(msg, {
position: 0,
duration: 1500
})
},
showLong: msg => {
this.toast = RootToast.show(msg, {
position: 0,
duration: 2000
})
},
showSuccess: (msg, options) => {
let toast = RootToast.show(
Platform.OS === 'ios' ?
<View style={styles.container}>
<Icon name='check' size={50} color={'#fff'}/>
<Text style={styles.message}>{msg}</Text>
</View> : msg, {
duration: 1500,
position: RootToast.positions.CENTER,
...options,
})
setTimeout(function () {
RootToast.hide(toast)
typeof options === 'function' ? options && options(): null
}, 2000)
},
showLongSuccess: (msg, options) => {
let toast = RootToast.show(
Platform.OS === 'ios' ?
<View style={styles.container}>
<Icon name='check' size={50} color={'#fff'}/>
<Text style={styles.message}>{msg}</Text>
</View> : msg, {
duration: 2000,
position: RootToast.positions.CENTER,
...options,
})
setTimeout(function () {
RootToast.hide(toast)
typeof options === 'function' ? options && options(): null
}, 2500)
},
showWarning: (msg, options) => {
let toast = RootToast.show(
Platform.OS === 'ios' ?
<View style={styles.container}>
<Icon name='warning' size={40} color={'#fff'}/>
<Text style={styles.message}>{msg}</Text>
</View> : msg, {
duration: RootToast.durations.SHORT,
position: RootToast.positions.CENTER,
...options,
})
setTimeout(function () {
RootToast.hide(toast)
}, RootToast.durations.SHORT + 500)
},
showError: (msg, options) => {
let toast = RootToast.show(
Platform.OS === 'ios' ?
<View style={styles.container}>
<Icon name='close' size={40} color={'#fff'}/>
<Text style={styles.message}>{msg}</Text>
</View> : msg, {
duration: RootToast.durations.SHORT,
position: RootToast.positions.CENTER,
...options,
})
setTimeout(function () {
RootToast.hide(toast)
}, RootToast.durations.SHORT + 500)
}
}
複製程式碼
Loading核心原始碼
const HUD = {
show: () => {
sibling = new RootSiblings(
<View style={styles.maskStyle}>
<View style={styles.backViewStyle}>
<ActivityIndicator size="large" color="white" />
</View>
</View>
)
},
hidden: ()=> {
if (sibling instanceof RootSiblings) {
sibling.destroy()
}
}
}
複製程式碼
福利時間
- 作者React Native開源專案OneM地址(按照企業開發標準搭建框架完成開發的):github.com/guangqiang-…:歡迎小夥伴們 star
- 作者簡書主頁:包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們:多多關注,多多點贊
- 作者React Native QQ技術交流群:620792950 歡迎小夥伴進群交流學習
- 友情提示:開發中有遇到RN相關的技術問題,歡迎小夥伴加入交流群,在群裡提問、互相交流學習。交流群也定期更新最新的RN學習資料給大家,謝謝大家支援!