反应原生开发包Toast和加载加载组件示例

在应用程序开发中，我们不能避免使用两个组件，一个Toast和一个网络Loading。在RN开发中，也是如此。React Native官方没有两个常用的组件，需要开发人员根据自己的需求来定义。作者在其他组件的基础上进行二次打包，使用起来更简单，可扩展性更强。学生只需要将Toast和Loading文件拖到项目中并安装相应的组件库

翻译

吐司和加载演示地址

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

演示使用所使用的三方组件

React-native-root-toast:用于显示toast react-native-root-同胞：用于加载在App顶部添加视图react-native-vector-图标：iconfont注意

反应原生向量图标需要使用链接，所以学生应该注意

烤面包成分

Toast组件在这里，作者将八种不同的使用场景进行了分类。目前可以想到的场景有很多。之后，学生还有其他可以自己添加的场景。吐司组件中使用的图标图标也可以由学生自己修改。

仅显示最简单文本的吐司仅显示最简单文本的长吐司，显示时间为500毫秒，以成功的勾号图标显示成功的吐司，并支持回调。使用场景与成功登录类似，显示成功的吐司1500毫秒，然后跳转到回调函数中的其他页面，显示成功的长吐司，持续500毫秒，支持回调。使用场景类似于登录成功，显示1000毫秒吐司，然后跳转到其他页面显示警告吐司，类似于登录表单。手机号码填写错误并显示错误消息。使用场景类似于登录表单，提交表单加载组件失败。

loading组件最常见的使用场景是当网络请求时，在请求数据之前，页面顶部会显示一个Loading框，可以防止用户在网络请求时做其他操作，可以给用户更好的体验，让页面不会出现空白和突兀

loading支持手动调用display: show()支持手动关闭display: hidden()在这里，笔者建议使用redux来控制Loading的显示和隐藏，这样就不需要在每一个需要网络请求的页面上手动调用display和hidden，更高端的Loading技巧可以参考笔者的https://github.com/guangqiang-liu/OneM

吐司核心源代码

const Toast={ toast: null，show : msg={ this。Toast=rootToast。show(msg，{ position: 0，duration: 1500 }) }，showlong : msg={ this。Toast=rootToast。show(msg，{ position : 0 0 0，duration: 2000 }) }，showSuccess: (msg，options)={让Toast=rootToast。表演(站台).OS==='ios '？视图样式={ style。容器}图标名称=' check ' size={ 50 } color={ ' # fff ' }/Text style={ style。消息} {消息}/文本/视图：消息，{工期： 1500，位置：根任务。位置。中心，options，})setTimeout(function(){ rootToast。隐藏(吐司)类型的选项==='函数'？options options()(: null }，2000) }，showLongSuccess: (msg，options)={ let toast=roottast。表演(站台.OS==='ios '？视图样式={ style。容器}图标名称=' check ' size={ 50 } color={ ' # fff ' }/Text style={ style。消息} {消息}/文本/视图：消息，{工期： 2000，位置：根任务。位置。中心，options，})setTimeout(function(){ rootToast。隐藏(吐司)类型的选项==='函数'？options options()(: null }，2500) }，show warn :(msg，options)={ let toast=rootToast。表演(站台.OS==='ios '？视图样式={样式。容器}图标名称='警告'大小={ 40 }颜色={ ' # fff ' }/文本样式={样式。消息} {消息}/文本/视图：消息，{持续时间： roottost。持续时间。短，位置： roottost。位置。中心，options，})setTimeout(function(){ rootToast。hide(toast)}，RootToast.durations.SHORT 500) }，showError: (msg，options)={ 0让吐司=根吐司.显示(平台.OS==='ios '？视图样式={样式。容器}图标名称='关闭'大小={ 40 }颜色={ ' # fff ' }/文本样式={样式。消息} {消息}/文本/视图：消息，{持续时间：根消息。持续时间。空头，号位置。位置。中心，options，})setTimeout(function(){ rootToast。hide(toast)}，rootToast。持续时间。短500)} }正在加载核心源码

const HUD={ show :()={ sibling=new root sibers(View style={ style。蒙版样式}视图样式={样式。backview style }活动指示器大小=' large ' color=' white '//View/View)}，隐藏：()={ if(根sibers的兄弟实例){ sible . destroy()} }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。