ReactNative for OpenHarmony项目鸿蒙化三方库：react-native-flash-message — 闪现消息组件

欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net开发环境声明本文基于 React Native 0.72.90 版本进行开发适配 一、开篇引言Flash Message 是一种轻量级的消息提示组件用于在应用顶部或底部显示短暂的通知信息。react-native-flash-message 是 React Native 社区中广受欢迎的消息提示库支持多种预设类型、自定义样式和动画效果非常适合用于显示成功、错误、警告等提示信息。本文将带你深入了解如何在 HarmonyOS 平台上集成和使用这个实用的 UI 组件。1.1 你将学到什么✅ FlashMessage 的核心概念与工作原理✅ HarmonyOS 平台的完整集成流程✅ 基础消息提示与多种类型✅ API 属性的深度解析✅ 实际应用场景的最佳实践1.2 适用人群正在进行 React Native 鸿蒙化迁移的开发者需要优雅消息提示方案的开发者对跨平台 UI 组件开发感兴趣的技术爱好者1.3 为什么选择 FlashMessage特点说明轻量级无需复杂配置开箱即用多种类型支持 success、info、warning、danger灵活定位支持 top、bottom、center 位置自定义渲染支持自定义内容渲染动画效果流畅的显示/隐藏动画 二、库概览2.1 基本信息项目内容库名称react-native-flash-message版本信息0.4.2官方仓库https://github.com/lucasferreira/react-native-flash-message开源协议MIT2.2 版本兼容性三方库版本支持RN版本0.4.20.72 / 0.772.3 核心能力矩阵能力项描述HarmonyOS 支持消息显示showMessage✅ 完全支持消息隐藏hideMessage✅ 完全支持位置控制position 属性✅ 完全支持类型预设type 属性✅ 完全支持自动隐藏autoHide 属性✅ 完全支持自定义渲染renderCustomContent✅ 完全支持点击事件onPress / onLongPress✅ 完全支持图标支持icon 属性✅ 完全支持2.4 技术架构图平台层功能层React Native 应用层FlashMessage 组件showMessage 方法hideMessage 方法消息类型位置控制动画效果自定义渲染AndroidiOSHarmonyOS2.5 典型应用场景场景描述示例操作反馈成功/失败提示✅ 保存成功、提交失败警告提示重要信息提醒⚠️ 电量低、网络异常信息通知系统消息展示ℹ️ 系统维护、新功能自定义消息复杂内容展示 带操作按钮的消息 三、安装与配置3.1 安装依赖进入到工程目录并输入以下命令npminstallreact-native-flash-message0.4.2或使用 yarnyarnaddreact-native-flash-message0.4.23.2 验证安装安装完成后检查package.json文件中是否包含以下依赖{dependencies:{react-native-flash-message:0.4.2}}3.3 基本导入import FlashMessage, { showMessage, hideMessage } from react-native-flash-message; 四、API 详解4.1 showMessage 方法用于显示消息提示的全局方法。签名showMessage(options:FlashMessageProps):void用法import { showMessage } from react-native-flash-message; showMessage({ message: 操作成功, description: 数据已保存, type: success, });4.2 hideMessage 方法用于手动隐藏消息的全局方法。签名hideMessage():void用法import { hideMessage } from react-native-flash-message; hideMessage();4.3 属性详解message - 消息标题消息的主标题文本。类型string必填是showMessage({ message: 操作成功, });description - 消息描述消息的详细描述文本。类型stringshowMessage({ message: 操作成功, description: 您的数据已成功保存, });type - 消息类型预设的消息类型决定消息的背景颜色和图标。类型success | info | warning | danger默认值info类型颜色用途success绿色成功操作info蓝色信息提示warning橙色警告提醒danger红色错误提示showMessage({ message: 操作成功, type: success, });position - 消息位置消息显示的位置。类型top | bottom | center默认值topshowMessage({ message: 底部消息, position: bottom, });duration - 显示时长消息自动隐藏的时间毫秒。类型number默认值1850showMessage({ message: 显示3秒, duration: 3000, });autoHide - 自动隐藏是否自动隐藏消息。类型boolean默认值trueshowMessage({ message: 需手动关闭, autoHide: false, });icon - 图标设置消息图标的配置。类型none | auto | success | info | warning | danger | object默认值autoshowMessage({ message: 自定义图标, icon: success, });hideOnPress - 点击隐藏点击消息是否隐藏。类型boolean默认值trueshowMessage({ message: 点击不关闭, hideOnPress: false, });onPress - 点击回调点击消息时的回调函数。类型() voidshowMessage({ message: 点击我, onPress: () console.log(消息被点击), });onLongPress - 长按回调长按消息时的回调函数。类型() voidshowMessage({ message: 长按我, onLongPress: () console.log(消息被长按), });animated - 动画开关是否启用显示/隐藏动画。类型boolean默认值trueshowMessage({ message: 无动画, animated: false, });animationDuration - 动画时长动画持续时间毫秒。类型number默认值225showMessage({ message: 慢动画, animationDuration: 500, });floating - 浮动样式是否使用浮动卡片样式。类型boolean默认值falseshowMessage({ message: 浮动消息, floating: true, });style - 容器样式消息容器的自定义样式。类型ViewStyleshowMessage({ message: 自定义样式, style: { backgroundColor: #9b59b6, borderRadius: 10 }, });titleStyle - 标题样式标题文本的自定义样式。类型TextStyleshowMessage({ message: 自定义标题, titleStyle: { fontSize: 18, fontWeight: bold }, });textStyle - 描述样式描述文本的自定义样式。类型TextStyleshowMessage({ message: 标题, description: 描述文本, textStyle: { fontSize: 14, color: #fff }, });renderBeforeContent - 前置渲染在标题之前渲染自定义内容。类型() JSX.ElementshowMessage({ message: 消息标题, renderBeforeContent: () ( View style{{ width: 40, height: 40, backgroundColor: #fff, borderRadius: 20 }} / ), });renderCustomContent - 自定义内容在标题下方渲染自定义内容。类型() JSX.ElementshowMessage({ message: 消息标题, renderCustomContent: () ( Text自定义内容区域/Text ), });renderAfterContent - 后置渲染在内容之后渲染自定义内容。类型() JSX.ElementshowMessage({ message: 消息标题, renderAfterContent: () ( TouchableOpacity onPress{() hideMessage()} Text关闭/Text /TouchableOpacity ), }); 五、使用示例5.1 基础消息提示展示四种基本类型的消息提示。适用场景操作反馈、状态提示。import React from react; import { View, TouchableOpacity, Text, StyleSheet } from react-native; import FlashMessage, { showMessage } from react-native-flash-message; const BasicFlashMessage () { const showSuccess () { showMessage({ message: 操作成功, description: 您的数据已成功保存, type: success, }); }; const showError () { showMessage({ message: 操作失败, description: 网络连接失败请重试。, type: danger, }); }; const showWarning () { showMessage({ message: 电量警告, description: 设备电量低于 20%请及时充电。, type: warning, }); }; const showInfo () { showMessage({ message: 系统通知, description: 系统将于今晚 23:00 进行维护升级。, type: info, }); }; return ( View style{styles.container} TouchableOpacity style{[styles.button, styles.successBtn]} onPress{showSuccess} Text style{styles.buttonText}成功提示/Text /TouchableOpacity TouchableOpacity style{[styles.button, styles.errorBtn]} onPress{showError} Text style{styles.buttonText}错误提示/Text /TouchableOpacity TouchableOpacity style{[styles.button, styles.warningBtn]} onPress{showWarning} Text style{styles.buttonText}警告提示/Text /TouchableOpacity TouchableOpacity style{[styles.button, styles.infoBtn]} onPress{showInfo} Text style{styles.buttonText}信息提示/Text /TouchableOpacity FlashMessage positiontop / /View ); }; const styles StyleSheet.create({ container: { flex: 1, justifyContent: center, alignItems: center, padding: 20, gap: 16, }, button: { width: 200, padding: 14, borderRadius: 8, alignItems: center, }, successBtn: { backgroundColor: #32a54a }, errorBtn: { backgroundColor: #cc3232 }, warningBtn: { backgroundColor: #cd853f }, infoBtn: { backgroundColor: #2b73b6 }, buttonText: { color: #fff, fontSize: 16, fontWeight: 600, }, }); export default BasicFlashMessage;代码解析type属性设置消息类型自动应用对应颜色description提供详细描述信息FlashMessage组件放在组件树最外层5.2 位置控制控制消息显示的位置。适用场景不同场景下的消息展示需求。import React from react; import { View, TouchableOpacity, Text, StyleSheet } from react-native; import FlashMessage, { showMessage } from react-native-flash-message; const PositionFlashMessage () { const showTop () { showMessage({ message: 顶部消息, description: 这是从顶部弹出的消息提示。, type: info, position: top, }); }; const showBottom () { showMessage({ message: 底部消息, description: 这是从底部弹出的消息提示。, type: info, position: bottom, }); }; const showCenter () { showMessage({ message: 居中消息, description: 这是居中显示的消息提示。, type: info, position: center, }); }; return ( View style{styles.container} TouchableOpacity style{[styles.button, { backgroundColor: #2b73b6 }]} onPress{showTop} Text style{styles.buttonText}顶部弹出/Text /TouchableOpacity TouchableOpacity style{[styles.button, { backgroundColor: #6441A4 }]} onPress{showBottom} Text style{styles.buttonText}底部弹出/Text /TouchableOpacity TouchableOpacity style{[styles.button, { backgroundColor: #e74c3c }]} onPress{showCenter} Text style{styles.buttonText}居中显示/Text /TouchableOpacity FlashMessage positiontop / /View ); }; const styles StyleSheet.create({ container: { flex: 1, justifyContent: center, alignItems: center, gap: 16, }, button: { width: 200, padding: 14, borderRadius: 8, alignItems: center, }, buttonText: { color: #fff, fontSize: 16, fontWeight: 600, }, }); export default PositionFlashMessage;代码解析position属性控制消息显示位置支持top、bottom、center三种位置可根据场景灵活选择5.3 自定义内容使用自定义渲染函数添加额外内容。适用场景需要丰富内容展示的场景。import React from react; import { View, TouchableOpacity, Text, StyleSheet } from react-native; import FlashMessage, { showMessage, hideMessage } from react-native-flash-message; const CustomFlashMessage () { const showCustomContent () { showMessage({ message: 新消息通知, description: 您有一条新的消息点击查看详情。, type: info, autoHide: false, renderBeforeContent: () ( View style{styles.avatarContainer} View style{styles.avatar} Text style{styles.avatarText}/Text /View /View ), renderAfterContent: () ( View style{styles.actionContainer} TouchableOpacity style{styles.actionBtn} onPress{() { console.log(查看消息); hideMessage(); }} Text style{styles.actionText}查看/Text /TouchableOpacity TouchableOpacity style{styles.actionBtn} onPress{() hideMessage()} Text style{styles.actionText}忽略/Text /TouchableOpacity /View ), }); }; return ( View style{styles.container} TouchableOpacity style{[styles.button, { backgroundColor: #3498db }]} onPress{showCustomContent} Text style{styles.buttonText}显示自定义消息/Text /TouchableOpacity FlashMessage positiontop / /View ); }; const styles StyleSheet.create({ container: { flex: 1, justifyContent: center, alignItems: center, }, button: { width: 200, padding: 14, borderRadius: 8, alignItems: center, }, buttonText: { color: #fff, fontSize: 16, fontWeight: 600, }, avatarContainer: { marginRight: 12, }, avatar: { width: 40, height: 40, borderRadius: 20, backgroundColor: #e0e0e0, justifyContent: center, alignItems: center, }, avatarText: { fontSize: 20, }, actionContainer: { flexDirection: row, marginTop: 12, gap: 12, }, actionBtn: { paddingHorizontal: 16, paddingVertical: 8, backgroundColor: rgba(255,255,255,0.2), borderRadius: 4, }, actionText: { color: #fff, fontSize: 14, }, }); export default CustomFlashMessage;代码解析renderBeforeContent在标题前渲染头像renderAfterContent在内容后渲染操作按钮autoHide: false禁用自动隐藏需手动关闭5.4 浮动样式使用浮动模式显示消息。适用场景需要卡片样式的消息提示。import React from react; import { View, TouchableOpacity, Text, StyleSheet } from react-native; import FlashMessage, { showMessage } from react-native-flash-message; const FloatingFlashMessage () { const showFloating () { showMessage({ message: 浮动消息, description: 这是一个浮动样式的消息提示带有圆角和边距。, type: success, floating: true, icon: success, }); }; return ( View style{styles.container} TouchableOpacity style{[styles.button, { backgroundColor: #27ae60 }]} onPress{showFloating} Text style{styles.buttonText}显示浮动消息/Text /TouchableOpacity FlashMessage positiontop floating{true} / /View ); }; const styles StyleSheet.create({ container: { flex: 1, justifyContent: center, alignItems: center, }, button: { width: 200, padding: 14, borderRadius: 8, alignItems: center, }, buttonText: { color: #fff, fontSize: 16, fontWeight: 600, }, }); export default FloatingFlashMessage;代码解析floating: true启用浮动样式消息会与屏幕边缘分离显示圆角六、常见问题6.1 遗留问题问题说明解决方案状态栏隐藏抖动iOS 和鸿蒙效果有差异暂未解决系统非安全区域范围变化导致6.2 常见问题解答Q1: 消息不显示怎么办A: 确保 FlashMessage 组件已放置在应用的最外层作为最后一个子组件。Q2: 如何修改消息颜色A: 使用style属性自定义背景色或使用type选择预设类型。Q3: 如何让消息不自动消失A: 设置autoHide: false然后通过hideMessage()手动关闭。Q4: 如何在消息中添加按钮A: 使用renderAfterContent渲染自定义按钮组件。6.3 最佳实践全局配置在应用入口处放置 FlashMessage 组件消息简洁保持消息内容简短明了合理时长根据内容长度调整 duration类型匹配根据场景选择合适的消息类型 七、完整示例代码综合示例import React, { useState } from react; import { View, Text, StyleSheet, SafeAreaView, ScrollView, TouchableOpacity, } from react-native; import FlashMessage, { showMessage, hideMessage } from react-native-flash-message; type MessageType success | info | warning | danger; const BasicDemo () { const showMessageWithType (type: MessageType, message: string, description: string) { showMessage({ message, description, type, icon: auto, }); }; return ( View style{styles.section} Text style{styles.sectionTitle}5.1 基础使用/Text View style{styles.buttonRow} TouchableOpacity style{[styles.typeButton, { backgroundColor: #32a54a }]} onPress{() showMessageWithType(success, 操作成功, 数据已保存)} Text style{styles.typeButtonText}成功/Text /TouchableOpacity TouchableOpacity style{[styles.typeButton, { backgroundColor: #cc3232 }]} onPress{() showMessageWithType(danger, 操作失败, 请重试)} Text style{styles.typeButtonText}错误/Text /TouchableOpacity TouchableOpacity style{[styles.typeButton, { backgroundColor: #cd853f }]} onPress{() showMessageWithType(warning, 警告, 请注意)} Text style{styles.typeButtonText}警告/Text /TouchableOpacity TouchableOpacity style{[styles.typeButton, { backgroundColor: #2b73b6 }]} onPress{() showMessageWithType(info, 提示, 系统消息)} Text style{styles.typeButtonText}信息/Text /TouchableOpacity /View /View ); }; const PositionDemo () { return ( View style{styles.section} Text style{styles.sectionTitle}5.2 位置控制/Text View style{styles.buttonRow} TouchableOpacity style{[styles.typeButton, { backgroundColor: #2b73b6 }]} onPress{() showMessage({ message: 顶部消息, description: 从顶部弹出, type: info, position: top, }) } Text style{styles.typeButtonText}顶部/Text /TouchableOpacity TouchableOpacity style{[styles.typeButton, { backgroundColor: #6441A4 }]} onPress{() showMessage({ message: 底部消息, description: 从底部弹出, type: info, position: bottom, }) } Text style{styles.typeButtonText}底部/Text /TouchableOpacity TouchableOpacity style{[styles.typeButton, { backgroundColor: #e74c3c }]} onPress{() showMessage({ message: 居中消息, description: 居中显示, type: info, position: center, }) } Text style{styles.typeButtonText}居中/Text /TouchableOpacity /View /View ); }; const CustomDemo () { return ( View style{styles.section} Text style{styles.sectionTitle}5.3 自定义内容/Text TouchableOpacity style{[styles.fullButton, { backgroundColor: #3498db }]} onPress{() showMessage({ message: 自定义消息, description: 带有额外内容的消息, type: info, autoHide: false, renderAfterContent: () ( View style{styles.customContent} Text style{styles.customText}点击下方按钮操作/Text View style{styles.actionRow} TouchableOpacity style{styles.actionBtn} onPress{() { console.log(确认操作); hideMessage(); }} Text style{styles.actionBtnText}确认/Text /TouchableOpacity TouchableOpacity style{styles.actionBtn} onPress{() hideMessage()} Text style{styles.actionBtnText}取消/Text /TouchableOpacity /View /View ), }) } Text style{styles.fullButtonText}显示自定义消息/Text /TouchableOpacity /View ); }; const FloatingDemo () { return ( View style{styles.section} Text style{styles.sectionTitle}5.4 浮动样式/Text TouchableOpacity style{[styles.fullButton, { backgroundColor: #27ae60 }]} onPress{() showMessage({ message: 浮动消息, description: 这是一个浮动样式的消息提示, type: success, floating: true, }) } Text style{styles.fullButtonText}显示浮动消息/Text /TouchableOpacity /View ); }; export default function App() { return ( SafeAreaView style{styles.container} ScrollView contentContainerStyle{styles.content} Text style{styles.title}FlashMessage 组件示例/Text Text style{styles.subtitle} 轻量级消息提示组件支持多种类型和自定义样式 /Text BasicDemo / PositionDemo / CustomDemo / FloatingDemo / View style{styles.infoSection} Text style{styles.infoTitle}功能说明/Text Text style{styles.infoText}• 5.1 基础使用四种预设类型消息/Text Text style{styles.infoText}• 5.2 位置控制顶部、底部、居中/Text Text style{styles.infoText}• 5.3 自定义内容自定义渲染内容/Text Text style{styles.infoText}• 5.4 浮动样式卡片式消息展示/Text /View /ScrollView FlashMessage positiontop / /SafeAreaView ); } const styles StyleSheet.create({ container: { flex: 1, backgroundColor: #f5f5f5, }, content: { padding: 16, }, title: { fontSize: 24, fontWeight: bold, color: #333, textAlign: center, }, subtitle: { fontSize: 14, color: #666, textAlign: center, marginTop: 8, marginBottom: 24, }, section: { backgroundColor: #fff, borderRadius: 12, padding: 16, marginBottom: 16, }, sectionTitle: { fontSize: 16, fontWeight: 600, color: #333, marginBottom: 12, }, buttonRow: { flexDirection: row, flexWrap: wrap, gap: 10, }, typeButton: { paddingHorizontal: 16, paddingVertical: 10, borderRadius: 8, minWidth: 70, alignItems: center, }, typeButtonText: { color: #fff, fontSize: 13, fontWeight: 600, }, fullButton: { paddingVertical: 14, borderRadius: 8, alignItems: center, }, fullButtonText: { color: #fff, fontSize: 15, fontWeight: 600, }, infoSection: { backgroundColor: #e8f4ff, borderRadius: 12, padding: 16, marginTop: 8, }, infoTitle: { fontSize: 16, fontWeight: 600, color: #007AFF, marginBottom: 8, }, infoText: { fontSize: 14, color: #333, lineHeight: 22, }, customContent: { marginTop: 12, padding: 12, backgroundColor: rgba(255,255,255,0.15), borderRadius: 8, }, customText: { color: #fff, fontSize: 14, textAlign: center, marginBottom: 12, }, actionRow: { flexDirection: row, justifyContent: center, gap: 16, }, actionBtn: { paddingHorizontal: 20, paddingVertical: 8, backgroundColor: rgba(255,255,255,0.25), borderRadius: 6, }, actionBtnText: { color: #fff, fontSize: 14, fontWeight: 600, }, }); 十、相关资源官方文档React Native 官方文档HarmonyOS 开发者文档