快捷導(dǎo)航

React Native開發(fā)封裝Toast與加載Loading組件示例

更新時間：2018年09月08日 15:25:52 作者：光強

這篇文章主要介紹了React Native開發(fā)封裝Toast與加載Loading組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在App開發(fā)中，我們避免不了使用的兩個組件，一個Toast，一個網(wǎng)絡(luò)加載Loading，在RN開發(fā)中，也是一樣，React Native官方并沒有提供者這兩個常用組件，需要開發(fā)者自己根據(jù)需求來自定義。作者就在其他組件的基礎(chǔ)上在進行二次封裝，使用起來更加簡單，更具擴展性，同學(xué)們只需將Toast與Loading文件拖到項目中，install對應(yīng)的組件庫即可

效果圖

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 才能使用，同學(xué)們需要注意

Toast組件

toast組件這里作者分類8種不同的使用場景，目前能想到的就這多場景了，后面同學(xué)們有其他場景，可以自行添加即可，Toast組件中使用到的Icon圖標，同學(xué)們也可以自行修改

只顯示最簡單的文本的toast
只顯示最簡單的文本的長toast，顯示時長 + 500毫秒
顯示success的toast，success的Toast帶有一個成功的對號icon
顯示success的toast，支持回調(diào)，使用場景類似于登錄成功，顯示1500毫秒toast，然后在回調(diào)函數(shù)中跳轉(zhuǎn)到其他頁面
顯示success的長toast，顯示時長 + 500毫秒
顯示success的長toast，顯示時長 + 500毫秒，支持回調(diào)，使用場景類似于登錄成功，顯示1000毫秒toast，然后跳轉(zhuǎn)到其他頁面
顯示warning的toast，使用場景類似于登錄表單，手機號填寫錯誤
顯示報錯的toast，使用場景類似于登錄表單，提交表單失敗

Loading組件

Loading組件最常用的使用場景就是網(wǎng)絡(luò)請求時，數(shù)據(jù)還沒有請求回來之前，頁面最上層顯示一個正在加載的loading框，一來能夠防止用戶在網(wǎng)絡(luò)請求時又做其他的操作，二來可以給用戶一個更好的體驗，不至于頁面空白，顯得突兀

loading支持手動調(diào)用顯示：show()
支持手動關(guān)閉顯示：hidden()

這里作者建議使用redux來控制Loading的顯示與隱藏，這樣不用在每一個需要網(wǎng)絡(luò)請求的頁面都手動去調(diào)用顯示與隱藏，更高端的Loading使用技巧可以參照作者的 https://github.com/guangqiang-liu/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()
 }
 }

}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: