React Native封裝Toast與加載Loading組件

時間 2019-11-12

標籤 react native 封裝 toast 加載 loading 組件欄目 React 简体版

原文原文鏈接

React Native開發封裝Toast與加載Loading組件

在App開發中，咱們避免不了使用的兩個組件，一個Toast，一個網絡加載Loading，在RN開發中，也是同樣，React Native官方並無提供者這兩個經常使用組件，須要開發者本身根據需求來自定義。做者就在其餘組件的基礎上在進行二次封裝，使用起來更加簡單，更具擴展性，同窗們只需將Toast與Loading文件拖到項目中，install對應的組件庫便可javascript

效果圖

gif

Toast和Loading Demo地址

https://github.com/guangqiang-liu/react-native-toastAndLoadingjava

Demo使用使用到的三方組件

react-native-root-toast：用來顯示toast
react-native-root-siblings：用來Loading在App最上層添加視圖
react-native-vector-icons：IconFont

注意

react-native-vector-icons 須要link 才能使用，同窗們須要注意react

Toast組件

toast組件這裏做者分類8種不一樣的使用場景，目前能想到的就這多場景了，後面同窗們有其餘場景，能夠自行添加便可，Toast組件中使用到的Icon圖標，同窗們也能夠自行修改ios

只顯示最簡單的文本的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框，一來可以防止用戶在網絡請求時又作其餘的操做，二來能夠給用戶一個更好的體驗，不至於頁面空白，顯得突兀git

loading支持手動調用顯示：show()
支持手動關閉顯示：hidden()

這裏做者建議使用redux來控制Loading的顯示與隱藏，這樣不用在每個須要網絡請求的頁面都手動去調用顯示與隱藏，更高端的Loading使用技巧能夠參照做者的React Native開發項目：OneMgithub

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() } } }