React Native开发封装Toast与加载Loading组件

在App开发中，咱们避免不了使用的两个组件，一个Toast，一个网络加载Loading，在RN开发中，也是同样，React Native官方并无提供者这两个经常使用组件，须要开发者本身根据需求来自定义。做者就在其余组件的基础上在进行二次封装，使用起来更加简单，更具扩展性，同窗们只需将Toast与Loading文件拖到项目中，install对应的组件库便可

效果图

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学习资料给你们，谢谢你们支持！