React Native開發封裝Toast與載入Loading元件

光強發表於2019-02-28
React Native封裝AST元件

在App開發中，我們避免不了使用的兩個元件，一個Toast，一個網路載入Loading，在RN開發中，也是一樣，React Native官方並沒有提供者這兩個常用元件，需要開發者自己根據需求來自定義。作者就在其他元件的基礎上在進行二次封裝，使用起來更加簡單，更具擴充套件性，同學們只需將Toast與Loading檔案拖到專案中，install對應的元件庫即可

效果圖

gif

Toast和Loading Demo地址

github.com/guangqiang-…

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學習資料給大家，謝謝大家支援！

相關文章