{"_id":"@bingtang-rn/react-native-toast-notifications","_rev":"2-2baf017dd5515430afcdce64b5654bcc","name":"@bingtang-rn/react-native-toast-notifications","dist-tags":{"latest":"3.4.1"},"versions":{"3.4.0":{"name":"@bingtang-rn/react-native-toast-notifications","version":"3.4.0","keywords":["react-native","harmony","harmonyos","toast","notification","react-native-toast-notifications"],"license":"MIT","_id":"@bingtang-rn/react-native-toast-notifications@3.4.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","dist":{"shasum":"79748ea5edd71f1e6c727e8d04c0fa0a3465fd52","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-toast-notifications/-/react-native-toast-notifications-3.4.0.tgz","fileCount":12,"integrity":"sha512-Kccs9i6RuanxBQWdGQEwZ8S4WqTkdYrZaVX0YMS3zQfQDPcdpQJstepIzF1k9SYjfF0TG0NzOZnkLrQQxhxeWQ==","signatures":[{"sig":"MEUCIDMPQT+ZUsaO33uQmJulc0KGPQAftYkMJ9Dr7gSbV/WzAiEAjCkRflB5ATV6HVCUwKNWVfEXHLJh/0zp7PdeLWImAGc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30540},"main":"./src/index.ts","types":"./src/index.ts","module":"./src/index.ts","engines":{"node":">=18"},"gitHead":"f56841041eb4e49ccce1a438c6cff451466eaf17","harmony":{"alias":"react-native-toast-notifications"},"private":false,"scripts":{"prepare":"echo skip prepare"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_toast_notifications组件。","directories":{},"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-toast-notifications_3.4.0_1785416692499_0.3481518231748453","host":"s3://npm-registry-packages-npm-production"}},"3.4.1":{"_id":"@bingtang-rn/react-native-toast-notifications@3.4.1","dist":{"shasum":"74afe48fbd800a4764b6efb46cf72cc3a2b72fbf","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-toast-notifications/-/react-native-toast-notifications-3.4.1.tgz","fileCount":12,"integrity":"sha512-ShCebddzlGLYlD9cj2m80P80E+OKCFnm4/4IBC7LJ8/pzjUZxvcMAIfNOuOBoNPT0Szi8ah+S46d67rVvEFE+A==","signatures":[{"sig":"MEYCIQDUxEbiUsRVCONtOp0Vj5DG9AHNMK6oQkjYaI7LSD6CbwIhAL8tKvfCldEUAvgYhBmnSCTaTIJqXVA/nSE5LcHWKTb9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC6OThOUvUOMQBWSq19EOB0q7tMKpo0QCngn6JjgEPV0QIhAJbEtNUfLNYW10lh+JjI7jvkcuZZL16IznCWnS0eNlMF"}],"unpackedSize":30864},"main":"./src/index.ts","name":"@bingtang-rn/react-native-toast-notifications","_from":"file:bingtang-rn-react-native-toast-notifications-3.4.1.tgz","types":"./src/index.ts","module":"./src/index.ts","engines":{"node":">=18"},"harmony":{"alias":"react-native-toast-notifications"},"license":"MIT","private":false,"scripts":{"prepare":"echo skip prepare"},"version":"3.4.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","keywords":["react-native","harmony","harmonyos","toast","notification","react-native-toast-notifications"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_toast_notifications\\bingtang-rn-react-native-toast-notifications-3.4.1.tgz","_integrity":"sha512-ShCebddzlGLYlD9cj2m80P80E+OKCFnm4/4IBC7LJ8/pzjUZxvcMAIfNOuOBoNPT0Szi8ah+S46d67rVvEFE+A==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_toast_notifications组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","react-native":"./src/index.ts","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-toast-notifications_3.4.1_1790569617090_0.7785628549576278"}}},"time":{"created":"2026-07-30T13:04:52.290Z","modified":"2026-09-28T04:26:57.348Z","3.4.0":"2026-07-30T13:04:52.679Z","3.4.1":"2026-09-28T04:26:57.182Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","keywords":["react-native","harmony","harmonyos","toast","notification","react-native-toast-notifications"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications","type":"git"},"description":"适配鸿蒙版本，提供react_native_toast_notifications组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-toast-notifications for HarmonyOS\r\n\r\n本项目基于 [react-native-toast-notifications](https://github.com/arnnis/react-native-toast-notifications#readme) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_toast_notifications/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 3.4.0 | 0.72+ | 否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-toast-notifications\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { TouchableOpacity, Text } from 'react-native';\r\nimport Toast, { ToastProvider, useToast } from 'react-native-toast-notifications';\r\n\r\n// 1. 用 ToastProvider 包裹根组件（配置全局默认值）\r\nfunction App() {\r\n  return (\r\n    <ToastProvider\r\n      placement=\"bottom\"\r\n      duration={5000}\r\n      animationType=\"slide-in\"\r\n      animationDuration={250}\r\n      swipeEnabled={true}\r\n      successColor=\"#2E7D32\"\r\n      dangerColor=\"#D32F2F\"\r\n      warningColor=\"#ED6C02\"\r\n      renderType={{\r\n        custom_toast: (toast) => (\r\n          <TouchableOpacity onPress={() => toast.onHide()}>\r\n            <Text>{toast.message}</Text>\r\n          </TouchableOpacity>\r\n        ),\r\n      }}\r\n    >\r\n      <Main />\r\n    </ToastProvider>\r\n  );\r\n}\r\n\r\n// 2. 在子树内用 useToast() 取实例\r\nfunction Main() {\r\n  const toast = useToast();\r\n\r\n  const showSuccess = () => {\r\n    const id = toast.show('保存成功', { type: 'success' });\r\n    // id 可用于后续 update / hide / isOpen\r\n  };\r\n\r\n  const updateToast = (id: string) => {\r\n    toast.update(id, '已更新为警告', { type: 'warning' });\r\n  };\r\n\r\n  return null;\r\n}\r\n\r\n// 3. 也可在 React 树外用全局单例 Toast（如 redux action / 工具函数）\r\n// Toast.show('全局通知');\r\n// Toast.hideAll();\r\n```\r\n\r\n> import 时使用原库名 `'react-native-toast-notifications'`，而非鸿蒙包名（由 `harmony.alias` 自动映射到 `@bingtang-rn/react-native-toast-notifications`）。\r\n\r\n**平台差异**：\r\n- `KeyboardAvoidingView` 在 HarmonyOS 下使用 `position` 行为，底部 toast 会跟随键盘区域上移。\r\n- `useNativeDriver` 在鸿蒙下启用 native driver（`true`）。\r\n- `swipeThreshold` 在鸿蒙下取 `10`（与 Android 一致，规避误触发）。\r\n- 未降级为 `@ohos.promptAction.showToast`：系统 Toast 样式单一、不可定制、不可含交互元素、单次 ≤3 秒，与「Fully Customizable」核心价值不重叠，故保留 JS 层渲染叠加。\r\n\r\n**权限要求**：\r\n- 无。本库为纯 JS/TS 实现，不申请任何 HarmonyOS 权限，不消费任何 `@ohos.*` Kit。Toast UI 全部由 React Native 核心原语（View/Text/Animated/PanResponder/KeyboardAvoidingView 等）在 JS 层渲染叠加。\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 当前版本 | 否 |\r\n\r\n如使用版本支持 Autolink 且工程已接入，可跳过手动配置。\r\n\r\n<details>\r\n<summary>Manual Link 配置</summary>\r\n\r\n> **说明**：本模块需要同时在 C++ 侧和 ETS 侧注册 Package。\r\n\r\n### 1. Overrides RN SDK\r\n\r\n在工程根目录 `oh-package.json5` 添加：\r\n\r\n```json\r\n{\r\n  \"overrides\": {\r\n    \"@rnoh/react-native-openharmony\": \"./react_native_openharmony\"\r\n  }\r\n}\r\n```\r\n\r\n### 2. 引入原生端依赖\r\n\r\n打开 `entry/oh-package.json5`，添加：\r\n\r\n```json\r\n\"dependencies\": {\r\n  \"@bingtang-rn/react-native-toast-notifications\": \"file:../../node_modules/@bingtang-rn/react-native-toast-notifications/harmony/toast_notifications.har\"\r\n}\r\n```\r\n\r\n执行 `ohpm install`。\r\n\r\n### 3. 配置 CMakeLists\r\n\r\n打开 `entry/src/main/cpp/CMakeLists.txt`，添加：\r\n\r\n```cmake\r\nset(OH_MODULES \"${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules\")\r\n\r\nadd_subdirectory(\"${OH_MODULES}/@bingtang-rn/react-native-toast-notifications/src/main/cpp\" ./toast_notifications)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC toast_notifications)\r\n```\r\n\r\n### 4. 注册 Package（C++ 侧）\r\n\r\n打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：\r\n\r\n```cpp\r\n#include \"ToastNotificationsPackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<ToastNotificationsPackage>(ctx),\r\n    };\r\n}\r\n```\r\n\r\n### 5. 注册 Package（ETS 侧）\r\n\r\n打开 `entry/src/main/ets/RNPackagesFactory.ets`，添加：\r\n\r\n```typescript\r\nimport { ToastNotificationsPackage } from '@bingtang-rn/react-native-toast-notifications/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new ToastNotificationsPackage(ctx),\r\n  ];\r\n}\r\n```\r\n\r\n</details>\r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| ToastProvider | 全局 Provider，包裹根组件并配置默认值 | placement/duration/animationType/animationDuration/successColor/dangerColor/warningColor/normalColor/icon/successIcon/dangerIcon/warningIcon/textStyle/style/offset/offsetTop/offsetBottom/swipeEnabled/renderToast/renderType | — | ✅ 完全支持 |\r\n| useToast | 在 Provider 子树内获取 Toast 实例 | 无 | { show, update, hide, hideAll, isOpen } | ✅ 完全支持 |\r\n| Toast（全局单例） | React 树外调用的全局 Toast 单例 | 无 | { show, update, hide, hideAll, isOpen } | ✅ 完全支持 |\r\n| show | 显示新 toast，返回 id | message: string \\| JSX.Element, options?: ToastOptions | string (id) | ✅ 完全支持 |\r\n| update | 原地更新已存在的 toast（不重置计时器） | id: string, message: string \\| JSX.Element, options?: ToastOptions | void | ✅ 完全支持 |\r\n| hide | 关闭单条 toast（触发退场动画后移除） | id: string | void | ✅ 完全支持 |\r\n| hideAll | 关闭栈内所有 toast | 无 | void | ✅ 完全支持 |\r\n| isOpen | 查询某 toast 是否处于打开状态 | id: string | boolean | ✅ 完全支持 |\r\n| ToastOptions.type | toast 类型（含自定义类型） | 'normal' \\| 'success' \\| 'danger' \\| 'warning' \\| string | — | ✅ 完全支持 |\r\n| ToastOptions.placement | 显示位置 | 'top' \\| 'bottom' \\| 'center' | — | ✅ 完全支持 |\r\n| ToastOptions.duration | 停留时长(ms)，0 表示不自动关闭 | number | — | ✅ 完全支持 |\r\n| ToastOptions.animationType | 进出动画 | 'slide-in' \\| 'zoom-in' | — | ✅ 完全支持 |\r\n| ToastOptions.animationDuration | 动画时长(ms) | number | — | ✅ 完全支持 |\r\n| ToastOptions.swipeEnabled | 是否允许滑动关闭 | boolean | — | ✅ 完全支持 |\r\n| ToastOptions.id | 自定义 id（用于后续 update/hide/isOpen） | string | — | ✅ 完全支持 |\r\n| ToastOptions.onPress | 点击 toast 回调 | (id: string) => void | — | ✅ 完全支持 |\r\n| ToastOptions.onClose | 关闭后回调 | () => void | — | ✅ 完全支持 |\r\n| ToastOptions.data | 自定义 payload（供 renderType 渲染） | any | — | ✅ 完全支持 |\r\n| ToastOptions.style / textStyle | 自定义容器样式 / 文字样式 | StyleProp<ViewStyle> / StyleProp<TextStyle> | — | ✅ 完全支持 |\r\n| ToastOptions.icon | 自定义图标 | JSX.Element | — | ✅ 完全支持 |\r\n| ToastOptions.successColor / dangerColor / warningColor / normalColor | 各类型背景色 | string | — | ✅ 完全支持 |\r\n| ToastOptions.successIcon / dangerIcon / warningIcon | 各类型图标 | JSX.Element | — | ✅ 完全支持 |\r\n| renderToast | 完全自定义 toast 渲染 | (toast: ToastProps) => JSX.Element | — | ✅ 完全支持 |\r\n| renderType | 自定义类型渲染映射 | { [type: string]: (toast: ToastProps) => JSX.Element } | — | ✅ 完全支持 |\r\n| offset / offsetTop / offsetBottom | 距顶/底偏移 | number | — | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- `KeyboardAvoidingView`：HarmonyOS 使用 `position` 行为让底部 toast 跟随键盘区域上移。\r\n- 本库未降级为 `@ohos.promptAction.showToast`：系统 Toast 样式单一、不可定制、不可含交互元素、单次 ≤3 秒，与「Fully Customizable」核心价值不重叠，故保留 JS 层渲染叠加。\r\n\r\n### 未实现功能\r\n无。本库全部公开能力（show/update/hide/hideAll/isOpen、四种预置类型、renderType 自定义类型、三向 placement、slide-in/zoom-in 动画、滑动关闭、onPress/onClose、全局单例、堆叠、自定义图标/颜色/样式、offset 偏移、data payload、swipeEnabled）均已在 HarmonyOS 上实现并通过 Example 验证。\r\n\r\n### 使用限制\r\n- 无权限要求、无原生 Kit 依赖。\r\n- 本库为纯 JS/TS 实现（js_only），无需 Manual Link / C++ / ETS Package 注册：`npm install @bingtang-rn/react-native-toast-notifications` 后由 `harmony.alias` 自动把 `react-native-toast-notifications` 的 import 重定向到鸿蒙化包，即可使用。\r\n- `Platform.OS` 全部分支已迁移为 `Platform.select({ harmony: ... })` 显式键，无排除法判断。\r\n\r\n## 快速验证（运行 Example）\r\n\r\n### 前置条件\r\n\r\n| 依赖 | 版本要求 |\r\n|------|----------|\r\n| Node.js | >= 18 |\r\n| DevEco Studio | 5.0+ / 6.0+ |\r\n| HarmonyOS SDK | API 17+ |\r\n\r\n### 运行步骤\r\n\r\n**1. 克隆仓库**\r\n\r\n```bash\r\ngit clone <仓库地址>\r\ncd <仓库目录>\r\n```\r\n\r\n**2. 安装依赖并构建**\r\n\r\n```bash\r\nnpm install --legacy-peer-deps\r\nnpm pack           # 生成 tgz 包（会自动触发 prepare 构建 JS 产物）\r\n```\r\n\r\n**3. 进入 example 目录，安装依赖**\r\n\r\n```bash\r\ncd example\r\nnpm install --legacy-peer-deps\r\n```\r\n\r\n**4. 生成 JS Bundle**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`\r\n\r\n**5. 用 DevEco Studio 打开鸿蒙工程**\r\n\r\n- 打开 DevEco Studio\r\n- 选择 `example/harmony` 目录\r\n- 等待 Sync 完成\r\n\r\n**6. 编译并运行 HAP**\r\n\r\n在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。\r\n\r\n> **注意**：Example 中已预置插件依赖和 Package 注册，无需手动配置 Link。\r\n\r\n## 约束与限制\r\n\r\n### 兼容性\r\n\r\n- RNOH: 0.72+\r\n- HarmonyOS SDK: API 17+\r\n- DevEco Studio: 5.0+\r\n\r\n## 遗留问题\r\n\r\n无（或列出已知问题）\r\n\r\n## 开源协议\r\n\r\n本项目基于 [原始库协议](原始库 LICENSE 链接)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}