本文记录把react-native-keyboard-spacer键盘占位视图适配到 HarmonyOS 的完整过程。它做的事很单一在软键盘弹出时撑开一个与键盘等高的占位视图把内容顶上去。库本身只有122 行3345 字节。但它同时踩了两个坑在 RN 0.84 React 19 上根本没法用★★★ 一、它一加载就崩ViewPropTypes已被移除源码里是这两行import{Keyboard,LayoutAnimation,View,Dimensions,ViewPropTypes,Platform,StyleSheet}fromreact-native;// L11…staticpropTypes{topSpacing:PropTypes.number,onToggle:PropTypes.func,style:ViewPropTypes.style,// ← L42类定义时求值};ViewPropTypes早已从 RN 里移除所以在 RN 0.84 上ViewPropTypes是undefined而ViewPropTypes.style在类定义时就被求值 ⇒直接抛错。实测点页面上的尝试 require 该库按钮try/catch包住require(react-native-keyboard-spacer) ⇒ require 成功typeof undefined看起来没报错但屏幕上同时弹出 LogBoxUncaught Error Cannot read property style of undefined Stack: anonymous loadModuleImplementation guardedLoadModule metroRequire anonymoushilog 里也有对应的一条[TypeError: Cannot read property style of undefined]⇒抛错确实发生了而且是在模块加载阶段栈里的loadModuleImplementation → guardedLoadModule → metroRequire就是证据✓★ 一个意外的收获这里的require没有把异常抛给我而是返回了undefined。也就是说模块求值期的异常被guardedLoadModule吃掉并上报到 LogBox但调用方拿到的是undefined⇒ 之后如果直接去用这个值就会变成一连串莫名其妙的undefined is not a function或静默失效。我在另一个三方库上遇到过完全一样的现象 ⇒ 这不是巧合而是可复现的行为两次都是模块求值阶段抛错但require返回undefined。★★★ 二、它监听的是 iOS 专有事件componentDidMount(){constupdateListenerPlatform.OSandroid?keyboardDidShow:keyboardWillShow;// L62constresetListenerPlatform.OSandroid?keyboardDidHide:keyboardWillHide;// L63this._listeners[Keyboard.addListener(updateListener,this.updateKeyboardSpace),Keyboard.addListener(resetListener,this.resetKeyboardSpace)];}鸿蒙的Platform.OS是harmony不是android⇒ 走 else 分支 ⇒ 监听keyboardWillShow/keyboardWillHide。而这两个是iOS 专有事件Android 系平台只会发keyboardDidShow/keyboardDidHide。实测页面上把Platform.OS直接印出来了Platform.OS harmony RN.ViewPropTypes undefined⇒ 也就是说即使把第一个坑补上这个库在鸿蒙上也很可能永远收不到通知、spacer 高度恒为 0✓★ 三、这一篇给出的替代做法好消息是这个库的逻辑本身只有一行公式非常容易自己实现keyboardSpace(Dimensions.get(window).height-event.endCoordinates.screenY)topSpacing⇒ 只要监听真的会触发的事件keyboardDidShow/keyboardDidHide再把这个高度套到一个View上就等于重新实现了一遍而且能用✓设备侧断言20 / 20 全部通过。一、先说结论项结果上游最新版0.4.1license: MIT上游 star1570库类型纯 JS 单文件组件库KeyboardSpacer.js仅 3345 B / 122 行是否需要原生适配不需要无harmony/、无NativeModules——但它也用不了运行时依赖✅ 仅prop-types宿主已有 15.8.1⇒没踩依赖坑prepare/postinstall✅ 都没有mainKeyboardSpacer.js源码直发需要 HAR / 权限 / ohpm❌ 都不需要设备侧断言✅20 / 20 通过A 14 B 5 C 1★★★ 致命点 1ViewPropTypes已被移除⇒style: ViewPropTypes.style在类定义时抛Cannot read property style of undefined⇒模块加载即崩★★★ 致命点 2Platform.OS android不成立实测harmony⇒ 监听keyboardWillShow/keyboardWillHideiOS 专有⇒ 疑永不更新★★★★ 意外收获模块求值期的异常被guardedLoadModule吃掉并上报 LogBox但require返回undefined两个独立库都复现★ 替代实现一行公式window.height − event.endCoordinates.screenY topSpacing★ 键盘事件实验⚠️不确定—— 本机模拟器上软键盘没有弹出来IME 进程起来了但没显示键盘⇒没能验证哪几个事件会真的触发二、判定与接入步做法结果①package.json里有没有harmony.autolinking没有②仓库里有没有harmony/没有③代码里有没有NativeModules全无④import 图体检只有prop-types宿主已有react/react-native⇒零额外安装⑤scripts扫prepare家族✅ 没有⑥★ 老 API 预扫抓到两条ViewPropTypes、以及Platform.OS android的事件名分支⑦★ 成员写法预扫全是简写原型方法constructor/componentDidMount/componentWillUnmount/updateKeyboardSpace/resetKeyboardSpace/render无箭头类字段npminstallgithttps://atomgit.com/oh-react-native/react-native-keyboard-spacer.git#0.4.1-ohos-1.0.0--ignore-scripts⚠️装得上但用不了require(react-native-keyboard-spacer) ⇒ TypeError: Cannot read property style of undefined 在模块加载阶段建议直接用第四节的替代实现。三、两个致命点的完整证据3.1 致命点 1ViewPropTypes.style模块加载即崩静态检查不触发崩溃Platform.OS harmony ★★ typeof RN.ViewPropTypes undefined ★★ typeof RN.ViewPropTypes?.style undefined容器化 requiretry/catch 按钮触发require(react-native-keyboard-spacer) ⇒ require 成功typeof undefined 同一时刻 LogBox 弹出 Uncaught Error Cannot read property style of undefined Stack: anonymous → loadModuleImplementation → guardedLoadModule → metroRequire → anonymous hilog [TypeError: Cannot read property style of undefined]⇒结论错误类型与源码推断完全一致styleofundefined栈也证明发生在模块加载期✓3.2 致命点 2监听 iOS 专有事件constupdateListenerPlatform.OSandroid?keyboardDidShow:keyboardWillShow;实测Platform.OS harmony⇒ 取 else ⇒keyboardWillShow/keyboardWillHide⇒ 这两个是iOS 专有Android 系平台发keyboardDidShow/keyboardDidHide✓3.3 ★★★★ 意外收获模块求值异常被吃掉上面那次require明明触发了TypeErrorLogBox hilog 都有可它返回给调用方的却是undefined没有抛错✓看栈就明白了loadModuleImplementation → guardedLoadModule → metroRequire⇒Metro 的guardedLoadModule把模块求值期的异常捕获并上报到 LogBox但require的返回值是undefined✓⇒实践影响constXrequire(some-broken-lib);// 不抛错X.doSomething();// ⇒ 之后才炸而且报错点离真正原因很远⇒所以预扫老 API比试着 require 一下看会不会报错更可靠—— 后者可能看起来没报错返回值undefined但错误其实已经发生只是被上报到 LogBox 了。四、替代实现可直接用原库的逻辑只有一行公式// 库里的写法L90-94constscreenHeightDimensions.get(window).height;constkeyboardSpace(screenHeight-event.endCoordinates.screenY)this.props.topSpacing;⇒把监听哪个事件换成真的会触发的再把这个高度套到View上即可import {Dimensions, Keyboard, View} from react-native; function useKeyboardSpacerHeight(topSpacing 0) { const [h, setH] useState(0); useEffect(() { // ★ 关键Android 系平台用 keyboardDid*不要用 iOS 专有的 keyboardWill* const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0)); return () { show.remove(); hide.remove(); }; // ★ 用新的 remove() API }, [topSpacing]); return h; } // 用法 const h useKeyboardSpacerHeight(0); View style{{height: h, left: 0, right: 0, bottom: 0}} /实测我页面上的替代实现四个事件同时监听并计数keyboardDid*分支驱动高度、keyboardWill*分支也接到同一处逻辑 ✓判据是高度 window.height − screenY ✓⚠️但键盘真的弹出来时高度对不对这一步本轮没能验证—— 见第六节。五、实测结果5.1 断言 20 / 20组内容结果A 契约与环境事实Platform.OS harmonyRN.ViewPropTypes不存在Keyboard.addListener/LayoutAnimation.Types/Properties存在Types.easeInEaseOut是string高度公式记录14/14B 渲染与替代实现页面渲染未抛错、标题安全区、键盘事件计数、替代实现高度记录5/5C 边界4 条边界记录含容器化 require 单独做成按钮的方法学说明1/1合计20/20关键观测值Platform.OS harmony ★★ typeof RN.ViewPropTypes undefined ★★ typeof RN.ViewPropTypes?.style undefined LayoutAnimation.Types 的键 … Types.easeInEaseOut 实测是 string ★★ require(react-native-keyboard-spacer) ⇒ 成功typeof undefined 同时 LogBoxUncaught Error / Cannot read property style of undefined 栈anonymous → loadModuleImplementation → guardedLoadModule → metroRequire hilog[TypeError: Cannot read property style of undefined] ★★ 已触发的键盘事件数 0 UI 安全区TITLE measureInWindow y420 117 ✓六、★ 本轮没做成的一个实验如实记录我本来最想验证的是RNOH 到底会发哪几个键盘事件keyboardWillShow/keyboardDidShow/keyboardWillHide/keyboardDidHide—— 因为这直接决定致命点 2成立与否。做法四个事件全部注册监听并打日志然后在页面上放一个TextInput点它唤起软键盘。结果点 TextInput (660,1881) … ★★ 已触发的键盘事件数 0排查检查输入法进程com.huawei.hmos.inputmethod:inputMethod确实在点击时刻启动了13:27:13✓但截图显示屏幕上并没有出现软键盘页面一直显示到底部✗⇒ 结论本机模拟器上软键盘没有弹出来很可能与模拟器的硬件键盘设置有关因此**哪些事件会触发这一点没有被验证** ✓⇒ 我不把它当作已验证结论只保留源码级判断“库监听的keyboardWill*是 iOS 专有事件在 Android 系平台上不发” ✓七、已知限制与本次验证边界7.1 用这个库要知道的事项说明★ 在 RN 0.84 上不可用ViewPropTypes已被移除 ⇒style: ViewPropTypes.style在类定义时抛错 ⇒加载即崩★ 事件名是 iOS 专有的Platform.OS android判断在鸿蒙上不成立 ⇒ 监听keyboardWillShow/keyboardWillHide★ 逻辑本身很简单高度公式window.height − endCoordinates.screenY topSpacing⇒ 自己实现代价极低onToggle(isOpened, keyboardSpace)展开(true, h)、收起(false, 0)topSpacing默认 0用于在键盘之上再留一点间距它用的是listener.remove()新 API这一处是对的不像有些老库用已移除的removeEventListener7.2 本次验证的边界哪些键盘事件会真的触发未验证软键盘在本机模拟器上没弹出见第六节替代实现在键盘真正弹出时的高度未验证同样因为键盘没弹出LayoutAnimation.configureNext的动画效果未验证onToggle回调未实测需要键盘事件驱动topSpacing的效果未实测styleprop 的透传未验证而且库里的propTypes定义本身就是崩的原因componentWillUnmount的listener.remove()未实测没有卸载实例旋转/Dimensions变化的重新计算未验证只在一台模拟器上验证Pura X Viewdensity 31320×2232没有真机未做跨平台对照。未改动库代码。八、常见问题Q1这个库为什么一装就崩因为ViewPropTypes已被 RN 移除而库在static propTypes里用了ViewPropTypes.stylestaticpropTypes{style:ViewPropTypes.style};// ⇒ Cannot read property style of undefined这是类定义时求值⇒模块加载阶段就抛。Q2我require它的时候没报错啊它确实抛了只是没有抛到你手上—— Metro 的guardedLoadModule会把模块求值期的异常捕获并上报到 LogBox而require返回undefined。实测require(react-native-keyboard-spacer) ⇒ 成功typeof undefined 同时屏幕上 LogBoxUncaught Error / Cannot read property style of undefined 栈loadModuleImplementation → guardedLoadModule → metroRequire⇒undefined就是加载失败的信号—— 之后再去用它就会报一堆离原因很远的错误。Q3假设我把ViewPropTypes的问题绕过去它能用吗很可能还是不行它监听的是keyboardWillShow/keyboardWillHide而这两个是iOS 专有事件因为它用Platform.OS android做分支而鸿蒙的Platform.OS是harmony落到 else。Q4那我在鸿蒙上该怎么做自己实现只有一行公式const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0));Q5onToggle是干什么的展开时回调onToggle(true, keyboardSpace)、收起时onToggle(false, 0)用来同步你的布局。Q6这个库需要鸿蒙侧做什么特殊处理吗原生侧什么都不需要纯 JS、零额外依赖。障碍全在JS 侧一个已移除的 APIViewPropTypes与一组 iOS 专有事件名。小结react-native-keyboard-spacer是 122 行的纯 JS 键盘占位组件零额外依赖。设备侧20 / 20断言通过。但它本身在 RN 0.84 上不可用。最值得记下来的是这几条★★★ 它在类定义时引用了已被移除的ViewPropTypes⇒ 模块加载即崩。错误与源码推断完全一致Cannot read property style of undefined调用栈loadModuleImplementation → guardedLoadModule → metroRequire证明发生在加载阶段。★★★★ 一个重要的机制发现模块求值期的异常被guardedLoadModule吃掉require返回undefined而不抛错。我这次亲眼看到LogBox 报了Uncaught Error、hilog 有TypeError而require却成功返回undefined。⇒实践影响很大const X require(broken-lib)看起来没事但X是undefined后面用它的地方才炸报错点离真正原因很远。⇒所以预扫老 API比试着 require 一下看报不报错更可靠。⇒ 顺带说明我在另一个三方库上遇到过完全一样的现象 ⇒这是可复现的行为不是巧合。★★★ 它监听的是 iOS 专有事件。Platform.OS android ? keyboardDidShow : keyboardWillShow—— 鸿蒙的Platform.OS是harmony实测直接印在页面上⇒ 落到 else ⇒keyboardWillShow/keyboardWillHide⇒ 在 Android 系平台上不会触发 ⇒即使修好第一个坑spacer 也很可能永远不动。★ 逻辑越简单越值得自己重写。这个库的全部价值是一行公式window.height − endCoordinates.screenY topSpacing⇒ 换成真的会触发的事件即可代价远低于修一个加载就崩的老库。★ 没做成的实验要如实写。我本想验证RNOH 发哪几个键盘事件四个事件都注册了、IME 进程也确实在点击时刻启动但截图显示软键盘根本没弹出来⇒ 我不把它当作已验证结论只保留源码级判断。★ 老 API 预扫这一条本轮再次先一步抓到东西ViewPropTypes而且这次连为什么 require 不报错都顺带查清了。本篇用到的库项内容三方库react-native-keyboard-spacer上游0.4.1的鸿蒙适配版适配仓库https://atomgit.com/oh-react-native/react-native-keyboard-spacer适配 TAG0.4.1-ohos-1.0.0需要 HAR / 权限 / ohpm都不需要纯 JS库类型单文件键盘占位组件在 RN 0.84 上不可用ViewPropTypes已移除 监听 iOS 专有事件运行时依赖✅ 仅prop-types宿主一般已有prepare/postinstall✅ 都没有许可证MIT上游仓库https://github.com/Andr3wHur5t/react-native-keyboard-spacer★1570宿主工程RNOH084Demo测试页rnAppKey KeyboardSpacerTestApp# 从适配仓库安装仅需 prop-typesnpminstallgithttps://atomgit.com/oh-react-native/react-native-keyboard-spacer.git#0.4.1-ohos-1.0.0--ignore-scripts# 本地目录接入npminstall../react-native-keyboard-spacer --ignore-scripts⚠️装得上、用不了加载期就会抛Cannot read property style of undefinedViewPropTypes已被移除。// ★ 替代实现把事件名换成真的会触发的 import {Dimensions, Keyboard, View} from react-native; function useKeyboardSpacerHeight(topSpacing 0) { const [h, setH] useState(0); useEffect(() { const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0)); return () { show.remove(); hide.remove(); }; }, [topSpacing]); return h; } const h useKeyboardSpacerHeight(0); View style{{height: h, left: 0, right: 0, bottom: 0}} / // ⚠️ 原库的问题 // static propTypes { style: ViewPropTypes.style } ⇒ ViewPropTypes 已被移除 ⇒ 加载即崩 // Platform.OS android ? keyboardDidShow : keyboardWillShow // ⇒ 鸿蒙 Platform.OS harmony ⇒ 落到 else ⇒ 监听 iOS 专有的 keyboardWill* // ⚠️ require 一个加载期抛错的模块时它可能【不抛错而返回 undefined】异常被上报到 LogBox# 换页启动测试页 —— force-stop 不能省hdc shell aa force-stop com.rnoh084.demo hdc shell aa start-bcom.rnoh084.demo-aEntryAbility--psrnAppKey KeyboardSpacerTestApp判据的复现方式# ① 老 API 静态检查不触发崩溃# typeof RN.ViewPropTypes ⇒ undefined库在类定义时用 ViewPropTypes.style# ② 容器化 require⚠️ 会让 LogBox 整屏红屏坑 206⇒ 放到单独的按钮截图之后再按# 然后从 dump 里读错误devecocli ui layout|Select-Stringlogbox_message_contents_text|logbox_stack_frame_text# ⇒ Cannot read property style of undefined 栈里的 guardedLoadModule# ③ 平台判断把 Platform.OS 直接印在页面上本轮实测 harmony# ④ 键盘事件四个事件都 addListener 并计数⚠️ 本机模拟器软键盘可能不弹出见正文第六节hdc shellps -ef | grep -i input# 看 IME 进程是否起来hdc shellsnapshot_display -f /data/local/tmp/x.jpeg# ★ 截图确认键盘是否真的显示环境搭建本手册的验证环境是React Native for OpenHarmonyRNOH。从零准备开发环境DevEco Studio、HarmonyOS SDK API 26、Node.js、ohpm、hvigorw、模拟器与hdc调试请按 CPF-RN 开发者指南的「环境初始化」操作CPF-RN 开发者指南 · 02-搭建准备 · 环境初始化https://atomgit.com/CPF-RN/docs/blob/main/开发者指南/02-搭建准备/环境初始化.md环境就绪后本次验证使用的具体版本组合见文末「验证环境」一节。验证环境项版本React Native0.84.1React19.2.3RNOHnpm / ohpmreact-native-oh/react-native-harmony/rnoh/react-native-openharmony0.84.3Node.js / npmv24.14.0/11.9.0DevEco Studio26.0.0.621HarmonyOS SDKAPI 2626.0.0.32设备HarmonyOS 7.0.0(26.0.0) Beta2 模拟器Pura X Viewohos-x641320×2232density 3本机状态栏高度117px页面留白取 48vp宿主依赖✅无需补装只需要已有的prop-types宿主 HAP 产物entry-default-signed.hap本次构建assembleHap4 分 38 秒19/21⇒ 修断言后 4 分 17 秒 ⇒20/20两次都检查了打包与构建的退出码验证规模设备侧20 / 20断言老 API 静态检查 5 项容器化 require 1 次含 LogBox 与调用栈取证平台判断 1 项键盘事件监听 4 个结论不确定替代实现 1 套UI 安全区 1 项相关社区与项目地址项目地址React Native 鸿蒙官方社区CPF-RNhttps://atomgit.com/CPF-RNRNOH 框架仓库https://atomgit.com/openharmony-RN/ohos_react_nativeRNOH 三方库使用文档https://atomgit.com/OpenHarmony-RN/usage-docsReact Native for OpenHarmony 组织https://atomgit.com/oh-react-nativeRN 三方库鸿蒙适配清单https://atomgit.com/oh-react-native/rn-ohos-adaptation-overview欢迎加入 CPF-RN 鸿蒙社区https://atomgit.com/CPF-RNReact Native for OpenHarmony 组织https://atomgit.com/oh-react-nativeRN 三方库鸿蒙适配清单https://atomgit.com/oh-react-native/rn-ohos-adaptation-overview
本文记录把react-native-keyboard-spacer键盘占位视图适配到 HarmonyOS 的完整过程。它做的事很单一在软键盘弹出时撑开一个与键盘等高的占位视图把内容顶上去。库本身只有122 行3345 字节。但它同时踩了两个坑在 RN 0.84 React 19 上根本没法用★★★ 一、它一加载就崩ViewPropTypes已被移除源码里是这两行import{Keyboard,LayoutAnimation,View,Dimensions,ViewPropTypes,Platform,StyleSheet}fromreact-native;// L11…staticpropTypes{topSpacing:PropTypes.number,onToggle:PropTypes.func,style:ViewPropTypes.style,// ← L42类定义时求值};ViewPropTypes早已从 RN 里移除所以在 RN 0.84 上ViewPropTypes是undefined而ViewPropTypes.style在类定义时就被求值 ⇒直接抛错。实测点页面上的尝试 require 该库按钮try/catch包住require(react-native-keyboard-spacer) ⇒ require 成功typeof undefined看起来没报错但屏幕上同时弹出 LogBoxUncaught Error Cannot read property style of undefined Stack: anonymous loadModuleImplementation guardedLoadModule metroRequire anonymoushilog 里也有对应的一条[TypeError: Cannot read property style of undefined]⇒抛错确实发生了而且是在模块加载阶段栈里的loadModuleImplementation → guardedLoadModule → metroRequire就是证据✓★ 一个意外的收获这里的require没有把异常抛给我而是返回了undefined。也就是说模块求值期的异常被guardedLoadModule吃掉并上报到 LogBox但调用方拿到的是undefined⇒ 之后如果直接去用这个值就会变成一连串莫名其妙的undefined is not a function或静默失效。我在另一个三方库上遇到过完全一样的现象 ⇒ 这不是巧合而是可复现的行为两次都是模块求值阶段抛错但require返回undefined。★★★ 二、它监听的是 iOS 专有事件componentDidMount(){constupdateListenerPlatform.OSandroid?keyboardDidShow:keyboardWillShow;// L62constresetListenerPlatform.OSandroid?keyboardDidHide:keyboardWillHide;// L63this._listeners[Keyboard.addListener(updateListener,this.updateKeyboardSpace),Keyboard.addListener(resetListener,this.resetKeyboardSpace)];}鸿蒙的Platform.OS是harmony不是android⇒ 走 else 分支 ⇒ 监听keyboardWillShow/keyboardWillHide。而这两个是iOS 专有事件Android 系平台只会发keyboardDidShow/keyboardDidHide。实测页面上把Platform.OS直接印出来了Platform.OS harmony RN.ViewPropTypes undefined⇒ 也就是说即使把第一个坑补上这个库在鸿蒙上也很可能永远收不到通知、spacer 高度恒为 0✓★ 三、这一篇给出的替代做法好消息是这个库的逻辑本身只有一行公式非常容易自己实现keyboardSpace(Dimensions.get(window).height-event.endCoordinates.screenY)topSpacing⇒ 只要监听真的会触发的事件keyboardDidShow/keyboardDidHide再把这个高度套到一个View上就等于重新实现了一遍而且能用✓设备侧断言20 / 20 全部通过。一、先说结论项结果上游最新版0.4.1license: MIT上游 star1570库类型纯 JS 单文件组件库KeyboardSpacer.js仅 3345 B / 122 行是否需要原生适配不需要无harmony/、无NativeModules——但它也用不了运行时依赖✅ 仅prop-types宿主已有 15.8.1⇒没踩依赖坑prepare/postinstall✅ 都没有mainKeyboardSpacer.js源码直发需要 HAR / 权限 / ohpm❌ 都不需要设备侧断言✅20 / 20 通过A 14 B 5 C 1★★★ 致命点 1ViewPropTypes已被移除⇒style: ViewPropTypes.style在类定义时抛Cannot read property style of undefined⇒模块加载即崩★★★ 致命点 2Platform.OS android不成立实测harmony⇒ 监听keyboardWillShow/keyboardWillHideiOS 专有⇒ 疑永不更新★★★★ 意外收获模块求值期的异常被guardedLoadModule吃掉并上报 LogBox但require返回undefined两个独立库都复现★ 替代实现一行公式window.height − event.endCoordinates.screenY topSpacing★ 键盘事件实验⚠️不确定—— 本机模拟器上软键盘没有弹出来IME 进程起来了但没显示键盘⇒没能验证哪几个事件会真的触发二、判定与接入步做法结果①package.json里有没有harmony.autolinking没有②仓库里有没有harmony/没有③代码里有没有NativeModules全无④import 图体检只有prop-types宿主已有react/react-native⇒零额外安装⑤scripts扫prepare家族✅ 没有⑥★ 老 API 预扫抓到两条ViewPropTypes、以及Platform.OS android的事件名分支⑦★ 成员写法预扫全是简写原型方法constructor/componentDidMount/componentWillUnmount/updateKeyboardSpace/resetKeyboardSpace/render无箭头类字段npminstallgithttps://atomgit.com/oh-react-native/react-native-keyboard-spacer.git#0.4.1-ohos-1.0.0--ignore-scripts⚠️装得上但用不了require(react-native-keyboard-spacer) ⇒ TypeError: Cannot read property style of undefined 在模块加载阶段建议直接用第四节的替代实现。三、两个致命点的完整证据3.1 致命点 1ViewPropTypes.style模块加载即崩静态检查不触发崩溃Platform.OS harmony ★★ typeof RN.ViewPropTypes undefined ★★ typeof RN.ViewPropTypes?.style undefined容器化 requiretry/catch 按钮触发require(react-native-keyboard-spacer) ⇒ require 成功typeof undefined 同一时刻 LogBox 弹出 Uncaught Error Cannot read property style of undefined Stack: anonymous → loadModuleImplementation → guardedLoadModule → metroRequire → anonymous hilog [TypeError: Cannot read property style of undefined]⇒结论错误类型与源码推断完全一致styleofundefined栈也证明发生在模块加载期✓3.2 致命点 2监听 iOS 专有事件constupdateListenerPlatform.OSandroid?keyboardDidShow:keyboardWillShow;实测Platform.OS harmony⇒ 取 else ⇒keyboardWillShow/keyboardWillHide⇒ 这两个是iOS 专有Android 系平台发keyboardDidShow/keyboardDidHide✓3.3 ★★★★ 意外收获模块求值异常被吃掉上面那次require明明触发了TypeErrorLogBox hilog 都有可它返回给调用方的却是undefined没有抛错✓看栈就明白了loadModuleImplementation → guardedLoadModule → metroRequire⇒Metro 的guardedLoadModule把模块求值期的异常捕获并上报到 LogBox但require的返回值是undefined✓⇒实践影响constXrequire(some-broken-lib);// 不抛错X.doSomething();// ⇒ 之后才炸而且报错点离真正原因很远⇒所以预扫老 API比试着 require 一下看会不会报错更可靠—— 后者可能看起来没报错返回值undefined但错误其实已经发生只是被上报到 LogBox 了。四、替代实现可直接用原库的逻辑只有一行公式// 库里的写法L90-94constscreenHeightDimensions.get(window).height;constkeyboardSpace(screenHeight-event.endCoordinates.screenY)this.props.topSpacing;⇒把监听哪个事件换成真的会触发的再把这个高度套到View上即可import {Dimensions, Keyboard, View} from react-native; function useKeyboardSpacerHeight(topSpacing 0) { const [h, setH] useState(0); useEffect(() { // ★ 关键Android 系平台用 keyboardDid*不要用 iOS 专有的 keyboardWill* const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0)); return () { show.remove(); hide.remove(); }; // ★ 用新的 remove() API }, [topSpacing]); return h; } // 用法 const h useKeyboardSpacerHeight(0); View style{{height: h, left: 0, right: 0, bottom: 0}} /实测我页面上的替代实现四个事件同时监听并计数keyboardDid*分支驱动高度、keyboardWill*分支也接到同一处逻辑 ✓判据是高度 window.height − screenY ✓⚠️但键盘真的弹出来时高度对不对这一步本轮没能验证—— 见第六节。五、实测结果5.1 断言 20 / 20组内容结果A 契约与环境事实Platform.OS harmonyRN.ViewPropTypes不存在Keyboard.addListener/LayoutAnimation.Types/Properties存在Types.easeInEaseOut是string高度公式记录14/14B 渲染与替代实现页面渲染未抛错、标题安全区、键盘事件计数、替代实现高度记录5/5C 边界4 条边界记录含容器化 require 单独做成按钮的方法学说明1/1合计20/20关键观测值Platform.OS harmony ★★ typeof RN.ViewPropTypes undefined ★★ typeof RN.ViewPropTypes?.style undefined LayoutAnimation.Types 的键 … Types.easeInEaseOut 实测是 string ★★ require(react-native-keyboard-spacer) ⇒ 成功typeof undefined 同时 LogBoxUncaught Error / Cannot read property style of undefined 栈anonymous → loadModuleImplementation → guardedLoadModule → metroRequire hilog[TypeError: Cannot read property style of undefined] ★★ 已触发的键盘事件数 0 UI 安全区TITLE measureInWindow y420 117 ✓六、★ 本轮没做成的一个实验如实记录我本来最想验证的是RNOH 到底会发哪几个键盘事件keyboardWillShow/keyboardDidShow/keyboardWillHide/keyboardDidHide—— 因为这直接决定致命点 2成立与否。做法四个事件全部注册监听并打日志然后在页面上放一个TextInput点它唤起软键盘。结果点 TextInput (660,1881) … ★★ 已触发的键盘事件数 0排查检查输入法进程com.huawei.hmos.inputmethod:inputMethod确实在点击时刻启动了13:27:13✓但截图显示屏幕上并没有出现软键盘页面一直显示到底部✗⇒ 结论本机模拟器上软键盘没有弹出来很可能与模拟器的硬件键盘设置有关因此**哪些事件会触发这一点没有被验证** ✓⇒ 我不把它当作已验证结论只保留源码级判断“库监听的keyboardWill*是 iOS 专有事件在 Android 系平台上不发” ✓七、已知限制与本次验证边界7.1 用这个库要知道的事项说明★ 在 RN 0.84 上不可用ViewPropTypes已被移除 ⇒style: ViewPropTypes.style在类定义时抛错 ⇒加载即崩★ 事件名是 iOS 专有的Platform.OS android判断在鸿蒙上不成立 ⇒ 监听keyboardWillShow/keyboardWillHide★ 逻辑本身很简单高度公式window.height − endCoordinates.screenY topSpacing⇒ 自己实现代价极低onToggle(isOpened, keyboardSpace)展开(true, h)、收起(false, 0)topSpacing默认 0用于在键盘之上再留一点间距它用的是listener.remove()新 API这一处是对的不像有些老库用已移除的removeEventListener7.2 本次验证的边界哪些键盘事件会真的触发未验证软键盘在本机模拟器上没弹出见第六节替代实现在键盘真正弹出时的高度未验证同样因为键盘没弹出LayoutAnimation.configureNext的动画效果未验证onToggle回调未实测需要键盘事件驱动topSpacing的效果未实测styleprop 的透传未验证而且库里的propTypes定义本身就是崩的原因componentWillUnmount的listener.remove()未实测没有卸载实例旋转/Dimensions变化的重新计算未验证只在一台模拟器上验证Pura X Viewdensity 31320×2232没有真机未做跨平台对照。未改动库代码。八、常见问题Q1这个库为什么一装就崩因为ViewPropTypes已被 RN 移除而库在static propTypes里用了ViewPropTypes.stylestaticpropTypes{style:ViewPropTypes.style};// ⇒ Cannot read property style of undefined这是类定义时求值⇒模块加载阶段就抛。Q2我require它的时候没报错啊它确实抛了只是没有抛到你手上—— Metro 的guardedLoadModule会把模块求值期的异常捕获并上报到 LogBox而require返回undefined。实测require(react-native-keyboard-spacer) ⇒ 成功typeof undefined 同时屏幕上 LogBoxUncaught Error / Cannot read property style of undefined 栈loadModuleImplementation → guardedLoadModule → metroRequire⇒undefined就是加载失败的信号—— 之后再去用它就会报一堆离原因很远的错误。Q3假设我把ViewPropTypes的问题绕过去它能用吗很可能还是不行它监听的是keyboardWillShow/keyboardWillHide而这两个是iOS 专有事件因为它用Platform.OS android做分支而鸿蒙的Platform.OS是harmony落到 else。Q4那我在鸿蒙上该怎么做自己实现只有一行公式const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0));Q5onToggle是干什么的展开时回调onToggle(true, keyboardSpace)、收起时onToggle(false, 0)用来同步你的布局。Q6这个库需要鸿蒙侧做什么特殊处理吗原生侧什么都不需要纯 JS、零额外依赖。障碍全在JS 侧一个已移除的 APIViewPropTypes与一组 iOS 专有事件名。小结react-native-keyboard-spacer是 122 行的纯 JS 键盘占位组件零额外依赖。设备侧20 / 20断言通过。但它本身在 RN 0.84 上不可用。最值得记下来的是这几条★★★ 它在类定义时引用了已被移除的ViewPropTypes⇒ 模块加载即崩。错误与源码推断完全一致Cannot read property style of undefined调用栈loadModuleImplementation → guardedLoadModule → metroRequire证明发生在加载阶段。★★★★ 一个重要的机制发现模块求值期的异常被guardedLoadModule吃掉require返回undefined而不抛错。我这次亲眼看到LogBox 报了Uncaught Error、hilog 有TypeError而require却成功返回undefined。⇒实践影响很大const X require(broken-lib)看起来没事但X是undefined后面用它的地方才炸报错点离真正原因很远。⇒所以预扫老 API比试着 require 一下看报不报错更可靠。⇒ 顺带说明我在另一个三方库上遇到过完全一样的现象 ⇒这是可复现的行为不是巧合。★★★ 它监听的是 iOS 专有事件。Platform.OS android ? keyboardDidShow : keyboardWillShow—— 鸿蒙的Platform.OS是harmony实测直接印在页面上⇒ 落到 else ⇒keyboardWillShow/keyboardWillHide⇒ 在 Android 系平台上不会触发 ⇒即使修好第一个坑spacer 也很可能永远不动。★ 逻辑越简单越值得自己重写。这个库的全部价值是一行公式window.height − endCoordinates.screenY topSpacing⇒ 换成真的会触发的事件即可代价远低于修一个加载就崩的老库。★ 没做成的实验要如实写。我本想验证RNOH 发哪几个键盘事件四个事件都注册了、IME 进程也确实在点击时刻启动但截图显示软键盘根本没弹出来⇒ 我不把它当作已验证结论只保留源码级判断。★ 老 API 预扫这一条本轮再次先一步抓到东西ViewPropTypes而且这次连为什么 require 不报错都顺带查清了。本篇用到的库项内容三方库react-native-keyboard-spacer上游0.4.1的鸿蒙适配版适配仓库https://atomgit.com/oh-react-native/react-native-keyboard-spacer适配 TAG0.4.1-ohos-1.0.0需要 HAR / 权限 / ohpm都不需要纯 JS库类型单文件键盘占位组件在 RN 0.84 上不可用ViewPropTypes已移除 监听 iOS 专有事件运行时依赖✅ 仅prop-types宿主一般已有prepare/postinstall✅ 都没有许可证MIT上游仓库https://github.com/Andr3wHur5t/react-native-keyboard-spacer★1570宿主工程RNOH084Demo测试页rnAppKey KeyboardSpacerTestApp# 从适配仓库安装仅需 prop-typesnpminstallgithttps://atomgit.com/oh-react-native/react-native-keyboard-spacer.git#0.4.1-ohos-1.0.0--ignore-scripts# 本地目录接入npminstall../react-native-keyboard-spacer --ignore-scripts⚠️装得上、用不了加载期就会抛Cannot read property style of undefinedViewPropTypes已被移除。// ★ 替代实现把事件名换成真的会触发的 import {Dimensions, Keyboard, View} from react-native; function useKeyboardSpacerHeight(topSpacing 0) { const [h, setH] useState(0); useEffect(() { const show Keyboard.addListener(keyboardDidShow, e { const sh Dimensions.get(window).height; setH(Math.max(0, sh - e.endCoordinates.screenY topSpacing)); }); const hide Keyboard.addListener(keyboardDidHide, () setH(0)); return () { show.remove(); hide.remove(); }; }, [topSpacing]); return h; } const h useKeyboardSpacerHeight(0); View style{{height: h, left: 0, right: 0, bottom: 0}} / // ⚠️ 原库的问题 // static propTypes { style: ViewPropTypes.style } ⇒ ViewPropTypes 已被移除 ⇒ 加载即崩 // Platform.OS android ? keyboardDidShow : keyboardWillShow // ⇒ 鸿蒙 Platform.OS harmony ⇒ 落到 else ⇒ 监听 iOS 专有的 keyboardWill* // ⚠️ require 一个加载期抛错的模块时它可能【不抛错而返回 undefined】异常被上报到 LogBox# 换页启动测试页 —— force-stop 不能省hdc shell aa force-stop com.rnoh084.demo hdc shell aa start-bcom.rnoh084.demo-aEntryAbility--psrnAppKey KeyboardSpacerTestApp判据的复现方式# ① 老 API 静态检查不触发崩溃# typeof RN.ViewPropTypes ⇒ undefined库在类定义时用 ViewPropTypes.style# ② 容器化 require⚠️ 会让 LogBox 整屏红屏坑 206⇒ 放到单独的按钮截图之后再按# 然后从 dump 里读错误devecocli ui layout|Select-Stringlogbox_message_contents_text|logbox_stack_frame_text# ⇒ Cannot read property style of undefined 栈里的 guardedLoadModule# ③ 平台判断把 Platform.OS 直接印在页面上本轮实测 harmony# ④ 键盘事件四个事件都 addListener 并计数⚠️ 本机模拟器软键盘可能不弹出见正文第六节hdc shellps -ef | grep -i input# 看 IME 进程是否起来hdc shellsnapshot_display -f /data/local/tmp/x.jpeg# ★ 截图确认键盘是否真的显示环境搭建本手册的验证环境是React Native for OpenHarmonyRNOH。从零准备开发环境DevEco Studio、HarmonyOS SDK API 26、Node.js、ohpm、hvigorw、模拟器与hdc调试请按 CPF-RN 开发者指南的「环境初始化」操作CPF-RN 开发者指南 · 02-搭建准备 · 环境初始化https://atomgit.com/CPF-RN/docs/blob/main/开发者指南/02-搭建准备/环境初始化.md环境就绪后本次验证使用的具体版本组合见文末「验证环境」一节。验证环境项版本React Native0.84.1React19.2.3RNOHnpm / ohpmreact-native-oh/react-native-harmony/rnoh/react-native-openharmony0.84.3Node.js / npmv24.14.0/11.9.0DevEco Studio26.0.0.621HarmonyOS SDKAPI 2626.0.0.32设备HarmonyOS 7.0.0(26.0.0) Beta2 模拟器Pura X Viewohos-x641320×2232density 3本机状态栏高度117px页面留白取 48vp宿主依赖✅无需补装只需要已有的prop-types宿主 HAP 产物entry-default-signed.hap本次构建assembleHap4 分 38 秒19/21⇒ 修断言后 4 分 17 秒 ⇒20/20两次都检查了打包与构建的退出码验证规模设备侧20 / 20断言老 API 静态检查 5 项容器化 require 1 次含 LogBox 与调用栈取证平台判断 1 项键盘事件监听 4 个结论不确定替代实现 1 套UI 安全区 1 项相关社区与项目地址项目地址React Native 鸿蒙官方社区CPF-RNhttps://atomgit.com/CPF-RNRNOH 框架仓库https://atomgit.com/openharmony-RN/ohos_react_nativeRNOH 三方库使用文档https://atomgit.com/OpenHarmony-RN/usage-docsReact Native for OpenHarmony 组织https://atomgit.com/oh-react-nativeRN 三方库鸿蒙适配清单https://atomgit.com/oh-react-native/rn-ohos-adaptation-overview欢迎加入 CPF-RN 鸿蒙社区https://atomgit.com/CPF-RNReact Native for OpenHarmony 组织https://atomgit.com/oh-react-nativeRN 三方库鸿蒙适配清单https://atomgit.com/oh-react-native/rn-ohos-adaptation-overview
知识建站
内容驱动
阅读友好版式
SEO 精细化
线索转化