欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net 前言Toast 提示是移动应用中常见的轻量级通知组件用于显示简短的信息提示、操作反馈等。react-native-easy-toast 是一个简单易用的 Toast 组件库提供丰富的配置选项和动画效果完全支持鸿蒙系统。使用 react-native-easy-toast 可以快速构建美观的提示组件大大提升开发效率。 库简介基本信息库名称: react-native-easy-toast当前版本: 2.3.0官方仓库: https://github.com/crazycodeboy/react-native-easy-toast主要功能:提供简洁易用的 Toast 组件支持自定义样式和位置支持自动隐藏和手动隐藏完全兼容 Android、iOS 和 HarmonyOS为什么需要这个库零配置: 纯 JavaScript 实现无需原生配置轻量级: 代码简洁体积小易用性: API 简单直观开箱即用跨平台: 在三端提供一致的体验灵活性: 支持自定义样式和动画 安装步骤1. 使用 npm 安装在项目根目录执行以下命令npminstallreact-native-easy-toast2.3.02. 验证安装安装完成后检查package.json文件应该能看到新增的依赖{dependencies:{react-native-easy-toast:^2.3.0,// ... 其他依赖}} HarmonyOS 平台配置react-native-easy-toast 是纯 JavaScript 组件无需任何原生配置。配置说明✅无需 Manual Link: 不需要手动链接原生代码✅无需 CMakeLists 配置: 不需要修改 CMakeLists.txt✅无需 PackageProvider 配置: 不需要修改 PackageProvider.cpp✅无需 ArkTs 配置: 不需要修改任何 ArkTs 文件✅即装即用: 安装后直接 import 使用TypeScript 类型声明可选react-native-easy-toast包自带了类型声明文件但是包自带的类型声明中缺少style属性的定义导致在使用style属性时会出现类型错误。解决方案创建类型声明扩展文件在项目根目录创建react-native-easy-toast.d.ts文件使用模块增强的方式扩展包自带的类型声明/** * react-native-easy-toast 类型声明扩展 * 扩展 node_modules 中的类型声明添加 style 属性支持 */import{StyleProp,ViewStyle}fromreact-native;declaremodulereact-native-easy-toast{// 扩展 IDuration 接口添加 LENGTH_LONGinterfaceIDuration{LENGTH_SHORT:number;LENGTH_LONG:number;FOREVER:number;}// 扩展 ToastComponentProps 接口添加 style 属性interfaceToastComponentProps{style?:StylePropViewStyle;position?:bottom|center|top;textStyle?:{};positionValue?:number;fadeInDuration?:number;fadeOutDuration?:number;opacity?:number;}}这个文件使用模块增强的方式扩展包自带的类型声明避免重复声明导致的类型冲突同时添加style属性和LENGTH_LONG常量的支持。 完整代码示例下面是一个完整的示例展示了react-native-easy-toast的各种使用场景。注意由于 Toast 组件的样式是固定的来自组件的 props要实现不同样式的 Toast需要为每种类型创建独立的 Toast 组件实例。importReact,{useRef}fromreact;import{View,Text,StyleSheet,ScrollView,SafeAreaView,TouchableOpacity,}fromreact-native;importToast,{DURATION}fromreact-native-easy-toast;functionEasyToastScreen(){// 创建多个 Toast 引用每个对应不同的样式constbasicToastRefuseRefToast(null);constsuccessToastRefuseRefToast(null);consterrorToastRefuseRefToast(null);constwarningToastRefuseRefToast(null);constshowBasicToast(){basicToastRef.current?.show(这是一个基础提示,DURATION.LENGTH_SHORT);};constshowLongToast(){basicToastRef.current?.show(这是一个长提示会显示较长时间,DURATION.LENGTH_SHORT*3);};constshowSuccessToast(){successToastRef.current?.show(操作成功,DURATION.LENGTH_SHORT);};constshowErrorToast(){errorToastRef.current?.show(操作失败请重试,DURATION.LENGTH_SHORT);};constshowWarningToast(){warningToastRef.current?.show(警告信息,DURATION.LENGTH_SHORT);};constshowCustomStyleToast(){basicToastRef.current?.show(自定义样式提示,2000,(){console.log(Toast 已隐藏);});};constshowPositionToast(){basicToastRef.current?.show(顶部提示,2000);};return(SafeAreaView style{styles.container}ScrollView style{styles.scrollView}Text style{styles.pageTitle}EasyToast 提示组件/Text{/* 基础提示 */}View style{styles.section}Text style{styles.sectionTitle}基础提示/TextTouchableOpacity style{styles.button}onPress{showBasicToast}Text style{styles.buttonText}显示基础提示/Text/TouchableOpacityTouchableOpacity style{styles.button}onPress{showLongToast}Text style{styles.buttonText}显示长提示/Text/TouchableOpacity/View{/* 不同类型的提示 */}View style{styles.section}Text style{styles.sectionTitle}不同类型的提示/TextTouchableOpacity style{[styles.button,styles.successButton]}onPress{showSuccessToast}Text style{styles.buttonText}成功提示/Text/TouchableOpacityTouchableOpacity style{[styles.button,styles.errorButton]}onPress{showErrorToast}Text style{styles.buttonText}错误提示/Text/TouchableOpacityTouchableOpacity style{[styles.button,styles.warningButton]}onPress{showWarningToast}Text style{styles.buttonText}警告提示/Text/TouchableOpacity/View{/* 自定义样式提示 */}View style{styles.section}Text style{styles.sectionTitle}自定义样式提示/TextTouchableOpacity style{styles.button}onPress{showCustomStyleToast}Text style{styles.buttonText}显示自定义样式/Text/TouchableOpacity/View{/* 位置提示 */}View style{styles.section}Text style{styles.sectionTitle}位置提示/TextTouchableOpacity style{styles.button}onPress{showPositionToast}Text style{styles.buttonText}显示顶部提示/Text/TouchableOpacity/View{/* 使用说明 */}View style{styles.section}Text style{styles.sectionTitle}使用说明/TextText style{styles.instructionText}1.react-native-easy-toast 是纯 JavaScript 组件无需原生配置/TextText style{styles.instructionText}2.使用 useRef 创建 Toast 引用/TextText style{styles.instructionText}3.通过 toastRef.current?.show()方法显示提示/TextText style{styles.instructionText}4.支持自定义显示时长和回调函数/TextText style{styles.instructionText}5.不同样式的 Toast 需要创建独立的组件实例/TextText style{styles.instructionText}6.完全兼容鸿蒙系统跨平台可用/Text/View/ScrollView{/* 基础 Toast - 黑色背景 */}Toast ref{basicToastRef}style{styles.basicToast}positiontoppositionValue{100}fadeInDuration{750}fadeOutDuration{1000}opacity{0.8}textStyle{styles.basicToastText}/{/* 成功 Toast - 绿色背景 */}Toast ref{successToastRef}style{styles.successToast}positiontoppositionValue{100}fadeInDuration{750}fadeOutDuration{1000}opacity{0.9}textStyle{styles.successToastText}/{/* 错误 Toast - 红色背景 */}Toast ref{errorToastRef}style{styles.errorToast}positiontoppositionValue{100}fadeInDuration{750}fadeOutDuration{1000}opacity{0.9}textStyle{styles.errorToastText}/{/* 警告 Toast - 黄色背景 */}Toast ref{warningToastRef}style{styles.warningToast}positiontoppositionValue{100}fadeInDuration{750}fadeOutDuration{1000}opacity{0.9}textStyle{styles.warningToastText}//SafeAreaView);}conststylesStyleSheet.create({container:{flex:1,backgroundColor:#f5f5f5,},scrollView:{flex:1,padding:20,},pageTitle:{fontSize:24,fontWeight:bold,marginBottom:20,textAlign:center,color:#333,},section:{backgroundColor:#fff,borderRadius:8,padding:16,marginBottom:16,shadowColor:#000,shadowOffset:{width:0,height:1},shadowOpacity:0.1,shadowRadius:2,elevation:2,},sectionTitle:{fontSize:16,fontWeight:600,marginBottom:12,color:#333,},button:{backgroundColor:#007AFF,borderRadius:8,paddingVertical:12,paddingHorizontal:24,marginBottom:8,alignItems:center,},successButton:{backgroundColor:#28a745,},errorButton:{backgroundColor:#dc3545,},warningButton:{backgroundColor:#ffc107,},buttonText:{color:#fff,fontSize:14,fontWeight:500,},// 基础 Toast 样式 - 黑色basicToast:{backgroundColor:#000,borderRadius:8,padding:12,marginHorizontal:20,},basicToastText:{color:#fff,fontSize:14,textAlign:center,},// 成功 Toast 样式 - 绿色successToast:{backgroundColor:#28a745,borderRadius:8,padding:12,marginHorizontal:20,},successToastText:{color:#fff,fontSize:14,fontWeight:600,textAlign:center,},// 错误 Toast 样式 - 红色errorToast:{backgroundColor:#dc3545,borderRadius:8,padding:12,marginHorizontal:20,},errorToastText:{color:#fff,fontSize:14,fontWeight:600,textAlign:center,},// 警告 Toast 样式 - 黄色warningToast:{backgroundColor:#ffc107,borderRadius:8,padding:12,marginHorizontal:20,},warningToastText:{color:#000,fontSize:14,fontWeight:600,textAlign:center,},instructionText:{fontSize:14,lineHeight:22,marginBottom:6,color:#666,},});exportdefaultEasyToastScreen; 代码讲解1. 基础提示consttoastRefuseRefToast(null);toastRef.current?.show(这是一个基础提示,DURATION.LENGTH_SHORT);使用 useRef 创建 Toast 引用通过 show 方法显示提示。2. 不同时长toastRef.current?.show(短提示,DURATION.LENGTH_SHORT);toastRef.current?.show(长提示,DURATION.LENGTH_SHORT*3);DURATION.LENGTH_SHORT: 短时间显示约2秒DURATION.LENGTH_LONG: 长时间显示约3.5秒3. 自定义时长toastRef.current?.show(自定义时长,2000,(){console.log(Toast 已隐藏);});可以自定义显示时长毫秒和隐藏回调函数。4. 自定义样式Toast ref{toastRef}style{styles.toast}textStyle{styles.toastText}/通过 style 和 textStyle 属性自定义样式。⚠️ 注意事项与最佳实践1. 引用管理consttoastRefuseRefToast(null);使用 useRef 管理 Toast 引用。2. 显示时长短提示使用DURATION.LENGTH_SHORT长提示使用DURATION.LENGTH_LONG自定义时长直接传入毫秒数3. 回调函数toastRef.current?.show(提示,2000,(){console.log(提示已隐藏);});可以设置隐藏后的回调函数。4. 样式定制conststylesStyleSheet.create({toast:{backgroundColor:#000,borderRadius:8,padding:12,},});使用 StyleSheet 创建自定义样式。5. HarmonyOS 兼容性react-native-easy-toast 是纯 JavaScript 组件在 HarmonyOS 上完全兼容无需任何额外配置。 测试验证1. Android 平台测试npmrun android测试要点:检查 Toast 显示和隐藏验证动画效果测试不同时长2. iOS 平台测试npmrun ios测试要点:检查 Toast 样式一致性验证位置显示测试触摸交互3. HarmonyOS 平台测试npmrun harmony测试要点:验证 Toast 渲染测试显示和隐藏检查样式应用 总结通过集成react-native-easy-toast我们为项目添加了一个简单易用的 Toast 提示组件库。这个库提供了丰富的配置选项、动画效果支持和跨平台的一致性可以大大提升开发效率。关键要点回顾✅安装依赖:npm install react-native-easy-toast2.3.0✅配置平台: 纯 JavaScript 库无需手动配置✅集成代码: 使用 Toast 组件和 show 方法✅样式定制: 使用 style 和 textStyle 属性✅测试验证: 确保三端表现一致