欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

React Native封装Toast与加载Loading组件

程序员文章站 2022-06-01 17:20:40
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二 ......

react native开发封装toast与加载loading组件

在app开发中,我们避免不了使用的两个组件,一个toast,一个网络加载loading,在rn开发中,也是一样,react native官方并没有提供者这两个常用组件,需要开发者自己根据需求来自定义。作者就在其他组件的基础上在进行二次封装,使用起来更加简单,更具扩展性,同学们只需将toast与loading文件拖到项目中,install对应的组件库即可

效果图

React Native封装Toast与加载Loading组件
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,支持回调,使用场景类似于登录成功,显示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【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/onem:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇rn开发相关的技术文章欢迎小伙伴们:多多关注,多多点赞
  • 作者react native qq技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到rn相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的rn学习资料给大家,谢谢大家支持!

小伙伴们扫下方二维码加入rn技术交流qq群

React Native封装Toast与加载Loading组件
qq群二维码,500+ rn工程师在等你加入哦