React Native開發(fā)封裝Toast與加載Loading組件
在App開發(fā)中愚战，我們避免不了使用的兩個組件芒篷，一個Toast，一個網(wǎng)絡加載Loading孟岛，在RN開發(fā)中瓶竭，也是一樣，React Native官方并沒有提供者這兩個常用組件渠羞，需要開發(fā)者自己根據(jù)需求來自定義斤贰。作者就在其他組件的基礎上在進行二次封裝，使用起來更加簡單次询，更具擴展性荧恍，同學們只需將Toast與Loading文件拖到項目中，install對應的組件庫即可
效果圖
gif
Toast和Loading Demo地址
https://github.com/guangqiang-liu/react-native-toastAndLoading
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煮寡，支持回調(diào)，使用場景類似于登錄成功犀呼，顯示1500毫秒toast幸撕，然后在回調(diào)函數(shù)中跳轉到其他頁面
- 顯示success的長toast，顯示時長 + 500毫秒
- 顯示success的長toast外臂，顯示時長 + 500毫秒坐儿，支持回調(diào)，使用場景類似于登錄成功宋光，顯示1000毫秒toast貌矿，然后跳轉到其他頁面
- 顯示warning的toast，使用場景類似于登錄表單跃须，手機號填寫錯誤
- 顯示報錯的toast站叼，使用場景類似于登錄表單娃兽，提交表單失敗
Loading組件
Loading組件最常用的使用場景就是網(wǎng)絡請求時菇民，數(shù)據(jù)還沒有請求回來之前，頁面最上層顯示一個正在加載的loading框投储，一來能夠防止用戶在網(wǎng)絡請求時又做其他的操作第练，二來可以給用戶一個更好的體驗，不至于頁面空白玛荞，顯得突兀
- loading支持手動調(diào)用顯示：show()
- 支持手動關閉顯示：hidden()
這里作者建議使用redux來控制Loading的顯示與隱藏娇掏，這樣不用在每一個需要網(wǎng)絡請求的頁面都手動去調(diào)用顯示與隱藏，更高端的Loading使用技巧可以參照作者的React Native開發(fā)項目：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【500+ star】地址(按照企業(yè)開發(fā)標準搭建框架完成開發(fā)的)：https://github.com/guangqiang-liu/OneM：歡迎小伙伴們 star
- 作者簡書主頁：包含60多篇RN開發(fā)相關的技術文章http://www.reibang.com/u/023338566ca5 歡迎小伙伴們：多多關注勋眯，多多點贊
