{"_id":"@bingtang-rn/react-native-modalfy","_rev":"2-83894647c5b8ccf723b2b51d475c47d2","name":"@bingtang-rn/react-native-modalfy","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-modalfy","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-modalfy"],"license":"MIT","_id":"@bingtang-rn/react-native-modalfy@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","dist":{"shasum":"8dcbdbb46d674053de8b28bcb4d176ee05ab00d4","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-modalfy/-/react-native-modalfy-1.0.0.tgz","fileCount":22,"integrity":"sha512-enOskt3LScrA00tGqzGdcx3+boesrUnNsob9w6xI3DwcuvinFC5c4/VNQKFEIq1KfqD3aH0s+Noo1sEiayYGYg==","signatures":[{"sig":"MEYCIQDTz4WWUlpGRgdBEsTldAMgKxIo+VxoZp2MRQjSQuxbhwIhANrW5xNeyCPkz3vA3PlaR/QYvt/6IrpQn/JNhmtNxK90","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":99254},"main":"src/index.ts","types":"src/index.ts","module":"src/index.ts","engines":{"node":">=18"},"gitHead":"b0925c047a1fa6249a7a56abb937b1ad94aef895","harmony":{"alias":"react-native-modalfy"},"private":false,"scripts":{},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_modalfy组件。","directories":{},"_nodeVersion":"24.15.0","dependencies":{"react-is":"^17.0.2","use-memo-one":"^1.1.2","hoist-non-react-statics":"^3.3.2"},"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","react-native-gesture-handler":">=2.2.1"},"_npmOperationalInternal":{"tmp":"tmp/react-native-modalfy_1.0.0_1785999655601_0.4906082284553701","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-modalfy@1.0.1","dist":{"shasum":"ce36d84060116e494b6f8cef7390b9c8424d02cc","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-modalfy/-/react-native-modalfy-1.0.1.tgz","fileCount":22,"integrity":"sha512-tiKU10/1O8A42JDKD8ks2k/DUX0Mh+vkCtL75QWOCPzTfjlyMAeB5DhGxbyNsIfnUzJIa/1i1quDX3YCY4k7nA==","signatures":[{"sig":"MEUCIDIQFx/mobjstddthwHKveP/wXYFwyEz/2+S4M3EOSowAiEArbng9/n7n6l36RhDECrHRuWfcyNfyflrTc/DKfIGPUM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCJ3uadWoNvhKgCUhyVritQCBrJulsAiDMonaAd756YTgIhALVa3X1A5G9Xf2KPWO7YW7YESHRarcDqXR0cJtSYLF1R"}],"unpackedSize":99311},"main":"src/index.ts","name":"@bingtang-rn/react-native-modalfy","_from":"file:bingtang-rn-react-native-modalfy-1.0.1.tgz","types":"src/index.ts","module":"src/index.ts","engines":{"node":">=18"},"harmony":{"alias":"react-native-modalfy"},"license":"MIT","private":false,"scripts":{},"version":"1.0.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","keywords":["react-native","harmony","harmonyos","react-native-modalfy"],"_resolved":"D:\\code\\rn\\npm\\batch\\react_native_modalfy\\bingtang-rn-react-native-modalfy-1.0.1.tgz","_integrity":"sha512-tiKU10/1O8A42JDKD8ks2k/DUX0Mh+vkCtL75QWOCPzTfjlyMAeB5DhGxbyNsIfnUzJIa/1i1quDX3YCY4k7nA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供react_native_modalfy组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","dependencies":{"react-is":"^17.0.2","use-memo-one":"^1.1.2","hoist-non-react-statics":"^3.3.2"},"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","react-native-gesture-handler":">=2.2.1"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-modalfy_1.0.1_1790569191132_0.44090245507454795"}}},"time":{"created":"2026-08-06T07:00:55.291Z","modified":"2026-09-28T04:19:51.414Z","1.0.0":"2026-08-06T07:00:55.756Z","1.0.1":"2026-09-28T04:19:51.205Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","keywords":["react-native","harmony","harmonyos","react-native-modalfy"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/react_native_modalfy","type":"git"},"description":"适配鸿蒙版本，提供react_native_modalfy组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-modalfy for HarmonyOS\r\n\r\n本项目基于 [react-native-modalfy](https://github.com/colorfy-software/react-native-modalfy) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/react_native_modalfy/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 见发布记录 | 3.7.0 | 0.72+ | 否 | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-modalfy\r\n```\r\n\r\n## 使用\r\n\r\n```tsx\r\nimport { ModalProvider, createModalStack, useModal } from 'react-native-modalfy';\r\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\r\n\r\nconst stack = createModalStack({\r\n  MyModal: MyModalComponent,\r\n});\r\n\r\nfunction App() {\r\n  const { openModal, closeModal, currentModal } = useModal();\r\n\r\n  return (\r\n    <GestureHandlerRootView style={styles.container}>\r\n      <ModalProvider stack={stack}>\r\n        <Button onPress={() => openModal('MyModal', { title: 'Hello' })} title=\"Open\" />\r\n      </ModalProvider>\r\n    </GestureHandlerRootView>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: { flex: 1 },\r\n});\r\n```\r\n\r\n> import 时使用原库名 `'react-native-modalfy'`，而非鸿蒙包名。\r\n\r\n**平台差异**：\r\n- HarmonyOS 上 Fling 手势（滑动关闭模态）依赖 `@react-native-oh-tpl/react-native-gesture-handler`，真机行为需实际设备验证\r\n- `Platform.OS === 'web'` 分支在鸿蒙端不执行，Web 专属逻辑（滚动锁定等）自动跳过\r\n\r\n**权限要求**：\r\n- 无\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-modalfy\": \"file:../../node_modules/@bingtang-rn/react-native-modalfy/harmony/modalfy.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-modalfy/src/main/cpp\" ./modalfy)\r\n\r\ntarget_link_libraries(rnoh_app PUBLIC modalfy)\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 \"ModalfyPackage.h\"\r\n\r\nstd::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {\r\n    return {\r\n        std::make_shared<ModalfyPackage>(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 { ModalfyPackage } from '@bingtang-rn/react-native-modalfy/ts';\r\n\r\nexport function createRNPackages(ctx: RNPackageContext): RNPackage[] {\r\n  return [\r\n    new ModalfyPackage(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| createModalStack | 创建模态栈配置 | config: ModalStackConfig, defaultOptions?: ModalOptions | ModalStack | ✅ 完全支持 |\r\n| ModalProvider | 模态栈容器组件 | stack: ModalStack, children: ReactNode | ReactElement | ✅ 完全支持 |\r\n| useModal | Hook 获取模态 API | 无 | UsableModalProp | ✅ 完全支持 |\r\n| withModal | HOC 获取模态 API | Component | Component | ✅ 完全支持 |\r\n| modalfy | Context 外部调用 API | 无 | UsableModalProp | ✅ 完全支持 |\r\n| openModal | 打开模态 | name, params?, callback? | void | ✅ 完全支持 |\r\n| closeModal | 关闭模态 | name?, callback? | void | ✅ 完全支持 |\r\n| closeModals | 关闭同名所有实例 | name, callback? | boolean | ✅ 完全支持 |\r\n| closeAllModals | 关闭所有模态 | callback? | void | ✅ 完全支持 |\r\n| currentModal | 当前栈顶模态名称 | 无 | string \\| null | ✅ 完全支持 |\r\n| getParam | 获取传入参数 | paramName, defaultValue? | any | ✅ 完全支持 |\r\n| addListener | 监听 onAnimate/onClose | eventName, callback | { remove() } | ✅ 完全支持 |\r\n| removeAllListeners | 移除所有监听器 | 无 | void | ✅ 完全支持 |\r\n| setModalOptions | 动态更新模态选项 | options: ModalOptions | void | ✅ 完全支持 |\r\n| params | 访问传入参数 | 无 | object | ✅ 完全支持 |\r\n| position | 模态垂直定位 | 'center' \\| 'top' \\| 'bottom' | — | ✅ 完全支持 |\r\n| animationIn/animationOut | 自定义动画函数 | (value, toValue, callback?) => void | — | ✅ 完全支持 |\r\n| animateInConfig/animateOutConfig | 动画配置 | { duration, easing } | — | ✅ 完全支持 |\r\n| backBehavior | 返回键行为 | 'pop' \\| 'clear' \\| 'none' | — | ✅ 完全支持 |\r\n| backdropColor/backdropOpacity | 背景遮罩 | string / number | — | ✅ 完全支持 |\r\n| backdropPosition | 背景遮罩位置 | 'root' \\| 'belowLatest' | — | ✅ 完全支持 |\r\n| disableFlingGesture | 禁用滑动关闭 | boolean | — | ✅ 完全支持 |\r\n| pointerEventsBehavior | 触摸事件行为 | 'auto' \\| 'none' \\| 'current-modal-only' \\| 'current-modal-none' | — | ✅ 完全支持 |\r\n| transitionOptions | 过渡样式函数 | (animatedValue) => Style | — | ✅ 完全支持 |\r\n| containerStyle | 模态容器样式 | ViewStyle | — | ✅ 完全支持 |\r\n| stackContainerStyle | 栈容器样式 | ViewStyle \\| (opacity) => ViewStyle | — | ✅ 完全支持 |\r\n\r\n### 平台差异\r\n- Fling 手势（`Gesture.Fling()`）用于模态滑动关闭，在鸿蒙端依赖 `@react-native-oh-tpl/react-native-gesture-handler`，构建已验证通过，真机运行时行为需实际设备测试\r\n- `Animated.timing` 的 `useNativeDriver: true` 在鸿蒙端支持 `translateY`/`opacity` 等属性\r\n- `BackHandler.addEventListener('hardwareBackPress')` 在鸿蒙端支持硬件返回键监听\r\n\r\n### 未实现功能\r\n无\r\n\r\n### 使用限制\r\n- 必须包裹在 `GestureHandlerRootView` 中（与原库一致）\r\n- Fling 手势仅在 `position` 为 `'top'` 或 `'bottom'` 时生效（与原库一致）\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本项目基于 [MIT](https://github.com/colorfy-software/react-native-modalfy/blob/main/LICENSE) 协议，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}