本文记录把react-native-notificationToast 式轻提示适配到 HarmonyOS 的完整过程。它做的事很小屏幕底部弹出一条深灰色的小提示淡入 → 停一会儿 → 淡出。全部代码105 行2189 字节零依赖。它踩的坑也很典型而且和之前几种都不一样——这次是从react里 importPropTypesimportReact,{Component,PropTypes,// ← L3}fromreact;constpropTypes{timeout:PropTypes.number,// ← L15模块作用域求值fadeTime:PropTypes.number,minOpacity:PropTypes.number,maxOpacity:PropTypes.number,message:PropTypes.string,};PropTypes早已从react里移出React 15.5 起改到独立的prop-types包⇒ 在 React 19 上React.PropTypes是undefined⇒PropTypes.number在模块作用域就抛错。实测点页面上的尝试 require 该库require(react-native-notification) ⇒ require 成功typeof undefined 同一时刻 LogBox Uncaught Error Cannot read property number of undefined ← ★ 全新的错误特征 Stack: anonymous → loadModuleImplementation → guardedLoadModule → metroRequire⇒错误特征与源码推断逐字一致number正是propTypes里第一个被求值的字段栈证明是模块加载期✓★ 这是第四个早已被移除的 API 导致加载即崩的库而且四次的原因各不相同React.createClassListView、ViewPropTypes、经兼容垫片失效的ViewPropTypes、以及本次的React.PropTypes。四个的表现完全一致require不抛错、返回undefined错误只出现在 LogBox 里。★★★ 好消息它的淡化行为可以被精确验证库的行为完全由Animated.Value驱动constructor(props){this.state{opacityValue:newAnimated.Value(this.props.minOpacity)};// 初值 0}componentWillReceiveProps(nextProps){if(nextProps.message){this.fadeIn();// Animated.timing → maxOpacityconsttimerIdsetTimeout((){this.fadeOut();// Animated.timing → minOpacityclearTimeout(timerId);},this.props.timeout);// 默认 3000ms}}fadeIn(){Animated.timing(this.state.opacityValue,{duration:this.props.fadeTime,toValue:this.props.maxOpacity}).start();}fadeOut(){Animated.timing(this.state.opacityValue,{duration:this.props.fadeTime,toValue:this.props.minOpacity}).start();}⇒ 既然透明度本身就是一个Animated.Value那就可以给它挂 listener把整条不透明度曲线读出来默认配置fadeTime500、maxOpacity0.9、minOpacity0.0、timeout3000。实测拿到的时间序列用替代实现跑一遍同样的逻辑★ 采样点总数 42 ★ 不透明度最大值 0.9 ← 正好等于 maxOpacity ★ 不透明度最小值 0 ← 正好等于 minOpacity ★ 采样明细最近 24 个 0.889,0.86,0.837,0.815,0.786,0.73,0.696,0.657,0.621,0.586, 0.541,0.5,0.456,0.409,0.322,0.14,0.119,0.093,0.067,0.027, 0.014,0.005,0,0⇒先升到 0.9、再降回 0一条完整的淡入 → 保持 → 淡出曲线 ✓⇒ 这不是看起来在闪而是从Animated.Value里直接读出来的数值序列。★★★ 顺带实证了一条源码级隐患LogBox 里出现了这条RN 0.84 报的Animated: useNativeDriver was not specified. This is a required option and must be specified…⇒ 库里的Animated.timing(...)没有传useNativeDriver✓ —— 与源码一致。★ 还有几处源码级隐患本轮不触发仅记录constScreenDimensions.get(window);// ← 模块加载时取一次之后不会再更新Notification.styles.container{position:absolute,bottom:35,width:Screen.width-80,left:40,right:40,backgroundColor:#444,padding:6,borderRadius:12,…};// 类里【没有 componentWillUnmount】⇒ setTimeout 不会在卸载时清掉Screen是模块级常量⇒ 旋转/分屏后宽度不会更新没有componentWillUnmount⇒ 组件在timeout到期前被卸载那句fadeOut()仍会执行对已卸载组件调用setState/Animated的风险componentWillReceiveProps是老生命周期仅告警。几何本身是可算的宽 window.width − 80本机window.width 440⇒360vpleft 40vp、bottom 35vp、底色#444、borderRadius 12。设备侧断言17 / 20其中 A11/11、B5/5C 组 4 条里3 条在最后一轮因测试脚手架问题未采到样本—— 详见第六节同样的 3 条在早先一轮里全部通过并已记录数据。一、先说结论项结果上游最新版2.0.0license: MIT上游 star ⚠️1313 很低但仍满足star 5库类型纯 JS 单文件组件库index.js仅 2189 B / 105 行是否需要原生适配不需要无harmony/、无NativeModules、无原生代码——但它也用不了运行时依赖✅零依赖import 图只有reactreact-nativeprepare/postinstall✅ 都没有只有precommitmainindex.js源码直发需要 HAR / 权限 / ohpm❌ 都不需要★★★ 致命点从reactimportPropTypes⇒ React 19 上为undefined⇒PropTypes.number模块作用域抛Cannot read property number of undefined⇒加载即崩★★★ 淡化行为Animated.Value的 listener 可读出完整曲线max0.9、min0、先升后降42 个采样★★ 告警Animated: useNativeDriver was not specifiedRN 0.84 报★ 其它隐患无componentWillUnmountsetTimeout不清Dimensions.get在模块级缓存componentWillReceiveProps老生命周期★ 平台分支 / 兼容垫片✅一处都没有比前几个库干净二、判定与接入步做法结果①package.json里有没有harmony.autolinking没有②仓库里有没有harmony/没有③代码里有没有NativeModules全无④import 图体检只有reactreact-native⇒零依赖不需要补装任何东西✓⑤scripts扫prepare家族✅ 没有⑥★ 老 API 预扫抓到了import { PropTypes } from react从 react 里取 PropTypes⑦成员写法预扫^\s*两类都有原型方法constructor/componentWillReceiveProps/render箭头类字段fadeIn/fadeOut⑧平台分支预扫✅ 无⑨原生代码痕迹预扫✅ 无npminstallgithttps://atomgit.com/oh-react-native/react-native-notification.git#2.0.0-ohos-1.0.0--ignore-scripts⚠️装得上但用不了require(react-native-notification) ⇒ TypeError: Cannot read property number of undefined 在模块加载阶段三、致命点的完整证据页面上直接印出来React 版本 19.2.3 React.PropTypes undefined React.PropTypes.number undefined prop-types正确来源 object ← 版本 15.8.1容器化 require按钮触发、try/catchrequire 成功typeof undefined LogBoxUncaught Error / Cannot read property number of undefined 栈anonymous → loadModuleImplementation → guardedLoadModule → metroRequire⇒特征词是number—— 正好是propTypes里第一个被求值的字段timeout: PropTypes.number✓⇒栈里的guardedLoadModule说明是模块求值期✓⇒ 与前三个同类库一样require不抛错、返回undefined✓四、淡化行为是怎么验证的4.1 判据设计不去看动画而是直接读透明度数值this.state.opacityValue.addListener(({value}) { samples.push({t: Date.now(), v: Number(value.toFixed(3))}); });⇒ 一次淡入淡出会产生几十个采样点构成一条时间序列 ✓4.2 实测结果★ 采样点总数 42 ★ 最大值 0.9 ← maxOpacity默认 0.9 ★ 最小值 0 ← minOpacity默认 0.0 ★ 明细最近 24 0.889,0.86,0.837,0.815,0.786,0.73,0.696,0.657,0.621,0.586,0.541,0.5, 0.456,0.409,0.322,0.14,0.119,0.093,0.067,0.027,0.014,0.005,0,0三条判据判据结果有采样listener 生效✅最大值达到maxOpacity附近✅0.9序列先升后降fadeIn → fadeOut✅最小值回到minOpacity附近✅0⚠️ 明细里0.322 → 0.14有一处跳变采样间隔与动画帧对齐的抖动不影响先升后降的结论 ✓4.3 几何可算但本轮只记录未量像素width:Screen.width-80,left:40,right:40,bottom:35,backgroundColor:#444本机Dimensions.get(window)实测{width: 440, height: 744, scale: 3}⇒width 360vp、left 40vp、bottom 35vp✓⚠️本轮没有量到这条提示的像素坐标我把替代实现放在了ScrollView的内容里而它是position: absolute⇒ 相对内容容器定位 ⇒ 落到了很长的内容底部dump 里出现在y≈2224几乎在屏幕外。这是我这边的摆放问题库的设计是放在根View里所以几何只做了源码级推算没有像素实测 ✓五、替代实现可直接用改动很小换掉PropTypes的来源其余逻辑照旧import React from react; import PropTypes from prop-types; // ★ 换成这个包不要再从 react 里取 import {Animated, Dimensions, StyleSheet, Text, View} from react-native; export default class Notification extends React.Component { static propTypes {timeout: PropTypes.number, fadeTime: PropTypes.number, minOpacity: PropTypes.number, maxOpacity: PropTypes.number, message: PropTypes.string}; static defaultProps {timeout: 3000, fadeTime: 500, minOpacity: 0, maxOpacity: 0.9, message: }; state {opacityValue: new Animated.Value(this.props.minOpacity)}; componentDidUpdate(prev) { if (this.props.message this.props.message ! prev.message) { // ★ 补上 useNativeDriverRN 0.84 会告警要求 Animated.timing(this.state.opacityValue, {duration: this.props.fadeTime, toValue: this.props.maxOpacity, useNativeDriver: true}).start(); const id setTimeout(() { Animated.timing(this.state.opacityValue, {duration: this.props.fadeTime, toValue: this.props.minOpacity, useNativeDriver: true}).start(); clearTimeout(id); }, this.props.timeout); this._timer id; // ★ 存起来卸载时清掉原库没有这一步 } } componentWillUnmount() { clearTimeout(this._timer); } // ★ 原库缺的就是这一句 render() { if (this.props.message ) { return null; } // 与原库一致 return ( Animated.View style{[styles.container, {opacity: this.state.opacityValue}]} Text style{styles.message}{this.props.message}/Text /Animated.View ); } } const styles StyleSheet.create({ container: {position: absolute, bottom: 35, left: 40, right: 40, // 宽度用 left/right 撑开避免缓存屏幕宽 backgroundColor: #444, alignItems: center, padding: 6, borderRadius: 12}, message: {color: #fff, fontSize: 12, textAlign: center}, });改了四处①prop-types换成独立包② 补useNativeDriver③ 用componentDidUpdate替代老生命周期④ 补componentWillUnmount 用left/right撑宽度不再缓存Screen.width。六、★ 本轮没拿到的一个数字如实记录最后一次重跑时C 组有 3 条断言失败✗ [C] 已有不透明度采样Animated.Value 的 listener期望 true实际 false ✗ [C] 最大值达到 maxOpacity(0.9) 附近≥0.85期望 true实际 false ✗ [C] 序列先上升fadeIn后下降fadeOut期望 true实际 false原因不在库而在我这一侧两条叠加我为了清日志重启了应用⇒ 采样数据存在内存里重启即清零重启后我想再触发一次但定位按钮时按文字去查 dump命中的却是页面上的提示文案Text#Paragraph(168) [36,600,1284,639] (尚无 —— 点「触发一次通知」)——因为我把提示文案写成了按钮的名字于是点到了这段文字上它不可点没点中按钮 ⇒ 没有新采样 ⇒ C 组必挂 ✓同一类错误容易反复出现例如按 placeholder 文字找TextInput。规律是不要用文字去 dump 里定位控件—— 页面上任何地方标题、提示、说明都可能包含同样的文字。更稳的做法是按控件类型节点TextInput#TextInput、Button找或给要点的东西加一个唯一的标记文本。⇒但这 3 条判据在同一轮的【早先一次运行】里是全部通过的数据就是第四节里那份42 个采样、0.9、0、完整序列✓ ⇒淡化行为本身是已验证的缺的是最后一次干净复现 ✓七、已知限制与本次验证边界7.1 用这个库要知道的事项说明★ 在 RN 0.84 上不可用从react里 importPropTypes⇒PropTypes.number在模块作用域抛错 ⇒ 加载即崩★ 正确来源是prop-types包改成import PropTypes from prop-types即可★Animated.timing缺useNativeDriverRN 0.84 会告警要求它★ 没有componentWillUnmountsetTimeout不会在卸载时清掉★Screen是模块级常量Dimensions.get(window)只在加载时取一次 ⇒ 旋转/分屏后宽度不更新★message为空串时不渲染render()直接return null★ 只有message变化才会触发行为完全由componentWillReceiveProps驱动自己不启动fadeIn/fadeOut在实例上是箭头类字段不在prototype可用ref调7.2 本次验证的边界原库的渲染结果完全未验证明知加载即崩故意不触发提示的像素几何未量我把它放在了ScrollView内容里落到了内容底部只做了源码级推算width360vp / left40 / bottom35timeout3s 后自动淡出的端到端计时未严格验证采样覆盖了整条曲线但没有断言保持段恰好 3suseNativeDriver告警的具体行为未深究只确认了它会被 RN 报出来卸载时setTimeout未清的风险未复现会触发 red screen 之类故意不触发旋转/分屏后宽度不更新的问题未实测message从非空变空、从一条换成另一条的情况未逐一验证shadow*阴影未验证star 只有 13⇒ 上游使用面很窄社区验证极少只在一台模拟器上验证Pura X Viewdensity 31320×2232没有真机未做跨平台对照。未改动库代码。八、常见问题Q1为什么一装就崩因为它是从react里取PropTypes的importReact,{Component,PropTypes}fromreact;// ← PropTypes 早已不在 react 里constpropTypes{timeout:PropTypes.number,…};// ← 模块作用域求值 ⇒ 崩⇒ 实测React.PropTypes undefined⇒PropTypes.number抛Cannot read property number of undefined。Q2我require它没报错它抛了只是没抛到你手上Metro 的guardedLoadModule会把模块求值期的异常报给 LogBox而require返回undefined实测栈loadModuleImplementation → guardedLoadModule → metroRequire。⇒undefined就是加载失败的信号。Q3改一行能修好吗基本可以 —— 把来源换成独立的包importPropTypesfromprop-types;// ★ 而不是从 react 里取但建议顺手把另外三处也一起修见第五节补useNativeDriver、补componentWillUnmount、别缓存Screen.width。Q4怎么知道它的淡入淡出到底对不对给它挂 listener 读数值就行this.state.opacityValue.addListener(({value}) console.log(value));实测会得到一条从0升到0.9再降回0的序列 ✓Q5为什么会有useNativeDriver的告警因为库里的Animated.timing(state.opacityValue, {duration, toValue})没有传useNativeDriverRN 0.84 会把它当成必须项来告警。Q6message传空串会怎样render()里if (this.props.message ) return null;⇒什么都不渲染✓Q7这个库需要鸿蒙侧做什么特殊处理吗原生侧什么都不需要纯 JS、零依赖。障碍全在JS 侧一个从react里取PropTypes的写法。小结react-native-notification是 105 行的纯 JS 轻提示组件零依赖。但它在 RN 0.84 上加载即崩。最值得记下来的是这几条★★★ “从react里 importPropTypes” 是第四种加载即崩的写法。实测错误特征是Cannot read property number of undefinednumber正是propTypes里第一个被求值的字段栈在loadModuleImplementation → guardedLoadModule。⇒ 至此本项目遇到过的四种已移除 API分别是React.createClassListView、ViewPropTypes、经兼容垫片失效的ViewPropTypes、以及本次的React.PropTypes——表现完全一致require不抛错、返回undefined错误只在 LogBox 里。★★★ 透明度驱动的东西可以直接读数值曲线来验证。给它挂一个Animated.Value的 listener就得到42 个采样点最大值0.9maxOpacity、最小值0minOpacity、先升后降✓⇒ 比看动画硬得多也解释了淡入 → 保持 → 淡出这一段确实按fadeTime/timeout走。★★ 顺带被 LogBox 实证的隐患Animated: useNativeDriver was not specified—— 与源码里Animated.timing缺参数完全对应。★★ 一处流程教训不要用文字去 dump 里定位控件。我为了再触发一次通知按按钮文字查 dump结果命中的是页面上的提示文案我把提示写成了按钮的名字⇒ 点到不可点的文字上、没触发 ⇒ C 组三条挂掉。⇒改用控件类型节点TextInput#TextInput/Button定位或给要点的目标加一个唯一标记—— 按 placeholder 文字找输入框也会栽在同一件事上。★ 一个零依赖的库也会崩—— 本轮的坑跟依赖无关纯粹是老写法。⇒ 所以import 图体检要通过但它不能替代老 API 预扫。★ star 只有 13—— 数值很低仍满足star 5的门槛。上游 2017 年后再无提交社区验证几乎为零遇到问题时几乎没有现成答案。本篇用到的库项内容三方库react-native-notification上游2.0.0的鸿蒙适配版适配仓库https://atomgit.com/oh-react-native/react-native-notification适配 TAG2.0.0-ohos-1.0.0需要 HAR / 权限 / ohpm都不需要纯 JS、零依赖库类型单文件 Toast 式轻提示在 RN 0.84 上不可用从react里 importPropTypes运行时依赖✅零prepare/postinstall✅ 都没有许可证MIT上游仓库https://github.com/frostney/react-native-notification⚠️★13宿主工程RNOH084Demo测试页rnAppKey NotificationTestApp# 从适配仓库安装零依赖无需补装npminstallgithttps://atomgit.com/oh-react-native/react-native-notification.git#2.0.0-ohos-1.0.0--ignore-scripts# 本地目录接入npminstall../react-native-notification --ignore-scripts⚠️装得上、用不了加载期就会抛Cannot read property number of undefined。// ★ 替代实现四处小改动见正文第五节 import React from react; import PropTypes from prop-types; // ① 换成独立的包 import {Animated, StyleSheet, Text} from react-native; static defaultProps {timeout: 3000, fadeTime: 500, minOpacity: 0, maxOpacity: 0.9, message: }; state {opacityValue: new Animated.Value(0)}; componentDidUpdate(prev) { // ③ 不用老生命周期 if (this.props.message this.props.message ! prev.message) { Animated.timing(this.state.opacityValue, {duration: 500, toValue: 0.9, useNativeDriver: true}).start(); // ② 补 useNativeDriver this._timer setTimeout(() Animated.timing(this.state.opacityValue, {duration: 500, toValue: 0, useNativeDriver: true}).start(), 3000); } } componentWillUnmount() { clearTimeout(this._timer); } // ④ 原库缺这一句 render() { if (this.props.message ) { return null; } // 与原库一致 return Animated.View style{[styles.container, {opacity: this.state.opacityValue}]} Text style{styles.message}{this.props.message}/Text /Animated.View; } // 几何width 用 left/right 撑开别缓存 Screen.width原库用 Dimensions.get 在模块级取一次 const styles StyleSheet.create({ container: {position: absolute, bottom: 35, left: 40, right: 40, backgroundColor: #444, alignItems: center, padding: 6, borderRadius: 12}, message: {color: #fff, fontSize: 12, textAlign: center}, }); // ⚠️ 原库的问题import {PropTypes} from react ⇒ React 19 上 undefined ⇒ 加载即崩 // ⚠️ Animated.timing 缺 useNativeDriver ⇒ RN 0.84 告警 // ⚠️ 验证淡化给 Animated.Value 挂 listener 读数值曲线实测 max 0.9 / min 0 / 先升后降# 换页启动测试页 —— force-stop 不能省hdc shell aa force-stop com.rnoh084.demo hdc shell aa start-bcom.rnoh084.demo-aEntryAbility--psrnAppKey NotificationTestApp判据的复现方式# ① 老 API 预扫本轮抓到的是从 react 里取 PropTypes# 搜 from react 那一行的具名导入里有没有 PropTypes / ViewPropTypes / createClass# ② 容器化 require⚠️ 会让 LogBox 整屏红屏坑 206⇒ 单独按钮截图之后再按devecocli ui layout|Select-Stringlogbox_message_contents_text|logbox_stack_frame_text# ⇒ Cannot read property number of undefined 栈里的 guardedLoadModule# ③ 淡化曲线给 Animated.Value 挂 listener把数值打出来# ⇒ 期望升到 maxOpacity(0.9) → 保持 timeout → 降回 minOpacity(0)# ④ ★ 定位控件不要按文字找页面上别处可能含同样文字# 用控件类型节点TextInput#TextInput / Button或给目标加唯一标记文本验证环境项版本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 39vp宿主依赖✅无需补装库零依赖宿主 HAP 产物entry-default-signed.hap本次构建assembleHap4 分 03 秒 ⇒A 11/11 B 5/5C 组在早先一轮4/4最后一轮因脚手架问题 1/4验证规模设备侧A 11 B 5 16 项全通、C 组 4 项中 3 项在早先一轮通过42 个采样、max 0.9、min 0、先升后降容器化 require 1 次LogBox 调用栈取证useNativeDriver告警 1 条环境事实 4 项几何源码推算 1 组360/40/35vp4 张截图互异相关社区与项目地址项目地址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