当前位置： 首页 > news >正文

基础入门 React Native 鸿蒙跨平台开发：react-native-easy-toast三方库适配

news 2026/5/12 16:10:50

欢迎加入开源鸿蒙跨平台社区：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-toast@2.3.0
2. 验证安装

安装完成后，检查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}from"react-native";declaremodule"react-native-easy-toast"{// 扩展 IDuration 接口，添加 LENGTH_LONGinterfaceIDuration{LENGTH_SHORT:number;LENGTH_LONG:number;FOREVER:number;}// 扩展 ToastComponentProps 接口，添加 style 属性interfaceToastComponentProps{style?:StyleProp<ViewStyle>;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}from'react';import{View,Text,StyleSheet,ScrollView,SafeAreaView,TouchableOpacity,}from'react-native';importToast,{DURATION}from'react-native-easy-toast';functionEasyToastScreen(){// 创建多个 Toast 引用，每个对应不同的样式constbasicToastRef=useRef<Toast>(null);constsuccessToastRef=useRef<Toast>(null);consterrorToastRef=useRef<Toast>(null);constwarningToastRef=useRef<Toast>(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}>基础提示</Text><TouchableOpacity style={styles.button}onPress={showBasicToast}><Text style={styles.buttonText}>显示基础提示</Text></TouchableOpacity><TouchableOpacity style={styles.button}onPress={showLongToast}><Text style={styles.buttonText}>显示长提示</Text></TouchableOpacity></View>{/* 不同类型的提示 */}<View style={styles.section}><Text style={styles.sectionTitle}>不同类型的提示</Text><TouchableOpacity style={[styles.button,styles.successButton]}onPress={showSuccessToast}><Text style={styles.buttonText}>成功提示</Text></TouchableOpacity><TouchableOpacity style={[styles.button,styles.errorButton]}onPress={showErrorToast}><Text style={styles.buttonText}>错误提示</Text></TouchableOpacity><TouchableOpacity style={[styles.button,styles.warningButton]}onPress={showWarningToast}><Text style={styles.buttonText}>警告提示</Text></TouchableOpacity></View>{/* 自定义样式提示 */}<View style={styles.section}><Text style={styles.sectionTitle}>自定义样式提示</Text><TouchableOpacity style={styles.button}onPress={showCustomStyleToast}><Text style={styles.buttonText}>显示自定义样式</Text></TouchableOpacity></View>{/* 位置提示 */}<View style={styles.section}><Text style={styles.sectionTitle}>位置提示</Text><TouchableOpacity style={styles.button}onPress={showPositionToast}><Text style={styles.buttonText}>显示顶部提示</Text></TouchableOpacity></View>{/* 使用说明 */}<View style={styles.section}><Text style={styles.sectionTitle}>使用说明</Text><Text style={styles.instructionText}>1.react-native-easy-toast 是纯 JavaScript 组件，无需原生配置</Text><Text style={styles.instructionText}>2.使用 useRef 创建 Toast 引用</Text><Text style={styles.instructionText}>3.通过 toastRef.current?.show()方法显示提示</Text><Text style={styles.instructionText}>4.支持自定义显示时长和回调函数</Text><Text style={styles.instructionText}>5.不同样式的 Toast 需要创建独立的组件实例</Text><Text style={styles.instructionText}>6.完全兼容鸿蒙系统，跨平台可用</Text></View></ScrollView>{/* 基础 Toast - 黑色背景 */}<Toast ref={basicToastRef}style={styles.basicToast}position="top"positionValue={100}fadeInDuration={750}fadeOutDuration={1000}opacity={0.8}textStyle={styles.basicToastText}/>{/* 成功 Toast - 绿色背景 */}<Toast ref={successToastRef}style={styles.successToast}position="top"positionValue={100}fadeInDuration={750}fadeOutDuration={1000}opacity={0.9}textStyle={styles.successToastText}/>{/* 错误 Toast - 红色背景 */}<Toast ref={errorToastRef}style={styles.errorToast}position="top"positionValue={100}fadeInDuration={750}fadeOutDuration={1000}opacity={0.9}textStyle={styles.errorToastText}/>{/* 警告 Toast - 黄色背景 */}<Toast ref={warningToastRef}style={styles.warningToast}position="top"positionValue={100}fadeInDuration={750}fadeOutDuration={1000}opacity={0.9}textStyle={styles.warningToastText}/></SafeAreaView>);}conststyles=StyleSheet.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. 基础提示
consttoastRef=useRef<Toast>(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. 引用管理
consttoastRef=useRef<Toast>(null);

使用 useRef 管理 Toast 引用。

2. 显示时长
  • 短提示使用DURATION.LENGTH_SHORT
  • 长提示使用DURATION.LENGTH_LONG
  • 自定义时长直接传入毫秒数
3. 回调函数
toastRef.current?.show('提示',2000,()=>{console.log('提示已隐藏');});

可以设置隐藏后的回调函数。

4. 样式定制
conststyles=StyleSheet.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-toast@2.3.0
  • ✅配置平台: 纯 JavaScript 库，无需手动配置
  • ✅集成代码: 使用 Toast 组件和 show 方法
  • ✅样式定制: 使用 style 和 textStyle 属性
  • ✅测试验证: 确保三端表现一致
http://www.jsqmd.com/news/396810/

相关文章：

  • 上海有哪些做研发数据管理的服务商？2026原创优选指南 - 冠顶工业设备
  • VisionMaster之平移旋转标定（十二点标定）
  • neovim报错：E319:No python3 provider found. Run :checkheaLth vim.provider
  • 定稿前必看！AI论文写作软件 千笔·专业论文写作工具 VS Checkjie，研究生专属神器！
  • 干货来了：自考必备的降AIGC工具 —— 千笔·降AIGC助手
  • 国内做得好的支付宝消费券回收平台推荐 - 京顺回收
  • 挺拔体态，悦见美好｜武汉普拉提体态调整课程，禧悦帮你摆脱体态困扰 - 冠顶工业设备
  • 对比一圈后!继续教育必备的降AI率网站 —— 千笔·专业降AIGC智能体
  • Nginx源代码学习：六种算法、六个文件、两千行C——Nginx负载均衡的全部秘密
  • 实测对比后AI论文工具，千笔 VS 灵感风暴AI更贴合专科生需求
  • 互联网大厂Java求职面试实战：基于电商场景的技术问答及解析
  • 闲置京东e卡怎么回收？可可收主流渠道实测，安全高效不踩坑 - 可可收
  • .txt文件与.text文件区别（都是纯文本文件，没有本质区别，.text扩展名非主流，有的操作系统不能识别，建议用.txt）
  • 2026年市场上知名的环氧酚醛生产工厂哪家好，环氧玻璃钢/光固化保护套/石墨烯涂料/环氧酚醛，环氧酚醛厂家选哪家 - 品牌推荐师
  • RabbitMQ核心概念与Spring Boot集成实战
  • 山东一卡通想回收！一分钟搞懂操作流程和注意事项 - 团团收购物卡回收
  • 肤契：租客
  • 支付宝立减金到期就亏了！合规玩法一次学会 - 可可收
  • 闲置山东一卡通别浪费！可可收正规线上回收，余额轻松兑现价值 - 可可收
  • K8S Sidecar方案：监控MySQL健康状态并重启相应Java应用
  • K8S + Spring Boot 高可用实战：MySQL宕机后如何保证 Java 应用不重启自动恢复
  • 凸优化数学基础笔记（六）：凸集、凸函数与凸规划
  • 题目1523:蓝桥杯算法提高VIP-打水问题
  • 获取的京东e卡套装用不上怎么回收？ - 抖抖收
  • 酒店提质新抓手｜BH酒店健身房器材选型指南，上海杰禾力解锁高端适配新路径 - 冠顶工业设备
  • 分期乐购物额度闲置不用？这样合规回收不浪费 - 可可收
  • 激光雷达(LiDAR)：速腾聚创MX激光雷达技术深度解析、视场角覆盖范围定量分析【最远探测距离：200米】【视场角（FOV）：120° x 25° 】
  • 2026年北京海瑞温斯顿手表维修推荐：非官方网点服务评测，解决时效与精度核心痛点 - 十大品牌推荐
  • 山东一卡通介绍与回收方法 - 抖抖收
  • 2026年北京海鸥手表维修推荐：权威机构网点排名，聚焦售后保障与非官方服务痛点 - 十大品牌推荐