本文记录把react-native-ticker数字滚动/翻牌效果适配到 HarmonyOS 的完整过程。它做的事很专一把一段文字通常是数字拆成单个字符每个字符位做成一个竖向滚轮—— 用translateY把目标字符滚到视口里于是数字变化时看起来像数字在滚动。结论数字场景纯数字/含小数点在鸿蒙上工作正常但它在字符集发生变化时会崩 —— 这是一个可以用源码解释、也用对照实验证实了的真实缺陷。★★★★★ 一、先说机制它是怎么量字又怎么滚的去掉编译产物后核心逻辑非常清楚index.js137 行// ① 把 children 拆成单字符constmeasureStringsChildren.map(children,childsplitText(${child})).reduce(...)// ② 是否含数字 ⇒ 决定轮子的内容consthasNumbersmeasureStrings.find(visNumber(v))!undefined;constnumberRangerange(10).map(pp);constnumAdditional[,,.];constnumberItems[...numberRange,...numAdditional];// [0..9, ,, .]constrotateItemsuniq([...(hasNumbers?numberItems:[]),...measureStrings]);// ③ 为 rotateItems 里每个元素渲染一个【隐藏 Text】absolute opacity:0靠 onLayout 量宽高rotateItems.map(vText style{[textStyle,styles.hide]}onLayout{ehandleMeasure(e,v)}{v}/Text)// ④ 全部量完 ⇒ measured trueif(Object.keys(measureMap.current).lengthrotateItems.length)setMeasured(true);// ⑤ 只有 measured 才渲染 TickItem{measuredtrueChildren.map(children,...)}// ⑥ TickItem把 rotateItems 全渲染成一列竖排 Text用 translateY 选一个露出来constpositiongetPosition({text:children,height:measurement.height,items:rotateItems});conststylePosuseSharedValue(position);constanimatedStylesuseAnimatedStyle(()({height:measurement.height,width:widthAnim.value,overflow:hidden,transform:[{translateY:stylePos.value}],}));⇒⇒ 这是一个先测量、再滚动的两段式状态机✓⇒measured这个状态就是本文最重要的伏笔。★★★★★ 二、核心发现字符集一变就崩Cannot read property height of undefined我的测试页用时间轴把值依次改成123→456→12.5→abc前三个阶段都正常第四阶段整页崩LogBox: Cannot read property height of undefined 此后页面上的单字符 Text 全部消失根因读源码就能推出来constmeasurementmeasureMap[children];// ★ children 变了但 measureMap 里没有它constpositiongetPosition({text:children,height:measurement.height,// ★ 这里崩items:rotateItems,});把过程走一遍阶段值hasNumbersrotateItemsmeasureMap里有什么1123true[0..9, ,, .]12 项量完这12 项⇒measured true2456true同上12 项还是那 12 项312.5true同上12 项还是那 12 项4abcfalse[a,b,c]3 项仍只有那 12 项 —— 没有a⇒measured一旦变成true就再也不会回到false源码里没有任何复位逻辑⇒ 于是第四阶段立刻去渲染TickItem而measureMap[a]是undefined⇒measurement.height崩✓✓★★★★★ 用对照实验证实纯数字路径不崩为了排除是别的原因导致崩我把时间轴改成只走纯数字123→456→12.5不切字符集再跑一遍5s值 123: 单字符 Text 数 0 LogBox: 无 ✓ 13s值 456: 单字符 Text 数 18 LogBox: 无 ✓ 21s值 12.5: LogBox: 无 ✓ ⇒ ✓✓ 纯数字路径三个阶段都没有 LogBox ⇒ 崩溃确实由【字符集变化】触发⇒⇒ 结论可靠崩因是字符集变化导致新字符没有量测结果不是随机问题✓✓顺带得到的状态机时序证据上面第一行5s 单字符 Text 数 0很有价值 —— 它说明页面挂载后measured仍然是false还在等 12 个onLayout回调到13s才变成18个单字符 Text ⇒measured已经true、TickItem开始渲染⇒onLayout在 RNOH 上确实是异步但可达的✓这个库正是靠它工作的对使用者的直接含义场景是否可用纯数字123→456、金额、计数器✅正常数字 小数点/逗号12.5、1,234✅正常,与.本来就在numberItems里数字 ⇄ 字母 混用123→abc❌崩本文发现的缺陷纯字母之间变化abc→abd⚠️ 字符集不变a,b,c→a,b,d里d是新的⇒同样会崩规避办法让 ticker 的字符集保持稳定例如始终用等宽数字、需要切字母时给 Ticker 换一个key强制重挂载Ticker key{String(value)} …{value}/Ticker {/* 换 key ⇒ 重挂载 ⇒ 重新量测 */}★★★★ 三、react-native-reanimated的处理功能桩附适配版信息它声明的 peer 是react-native-reanimated: 2.4.1原生库worklets C。但它的用法面非常小 —— 只有 5 个 APIimportAnimated,{useSharedValue,useAnimatedStyle,withTiming,Easing}fromreact-native-reanimated;鸿蒙适配版是存在的包版本react-native-ohos/react-native-reanimated4.0.2react-native-oh-tpl/react-native-reanimated3.6.4-rc.1但我这一轮选择打桩理由reanimated 需要babel plugin worklets接入不只是加 HARHAR 接入此前实测失败过一次更关键本库的核心逻辑拆字 →onLayout量宽高 →measured状态机 → 渲染TickItem全是纯 JS把 reanimated 换成瞬间到位的功能桩后渲染结构与几何仍然真实只有滚动过渡变成瞬移。桩做成了功能可用而不是空壳constuseSharedValue(initial)/* 返回稳定的 {value} 对象 */;constuseAnimatedStyle(updater)updater()||{};// 直接执行 workletconstwithTiming(toValue)toValue;// 直接到位constEasing{linear:tt,ease:tt,/* … */};constAnimated{View,Text,ScrollView,/* … */};// 直接映射 RN 组件⚠️代价必须写清楚滚动动画的过程完全没看到只有终值正确。接了真 reanimated 之后动画是否顺畅本轮未验证。★★★★★ 四、桩统计给出了一条漂亮的行为计数证据链桩会统计三个计数我在每个相位打一次 ⇒ 数字与组件的内部结构精确对应挂载初期 {sharedValueCount: 0, animatedStyleCount: 0, withTimingCount: 0} P0值 123 {sharedValueCount: 12, animatedStyleCount: 6, withTimingCount: 12} P1值 456 {sharedValueCount: 12, animatedStyleCount: 12, withTimingCount: 18} P2值 12.5 {sharedValueCount: 12, animatedStyleCount: 18, withTimingCount: 24} P3值 abc {sharedValueCount: 14, animatedStyleCount: 25, withTimingCount: 32}怎么读这些数字sharedValueCount 12⇒ 页面上一共有6 个TickItemE1 的 3 个字符位 E2 固定的abc3 个字符位每个TickItem里有两处useSharedValuewidthAnim与stylePos⇒6 × 2 12✓✓withTimingCount每次改值 6⇒3 个字符位 × 2 个withTiming位置 宽度 6✓✓animatedStyleCount每次 6⇒3 个字符位 × 1 个useAnimatedStyle 6✓✓⇒⇒ 这些计数不是跑起来了的模糊证据而是能和源码结构一一对上的整数✓✓⇒这条经验值得复用给桩加按 API 分类的计数就能反推组件内部渲染了多少个实例、每实例调了几次 hook✓★★★★ 五、文本级判据单字符 Text 的数量与内容TickItem会把rotateItems全部渲染成一列竖排Text靠translateY只让目标字符露出来。所以我直接数布局 dump 里内容是单个字符的Text单字符 Text 的种类数 15 内容 ,×1 .×1 0×1 1×1 2×1 3×1 4×1 5×1 6×1 7×1 8×1 9×1 a×2 b×2 c×2 总数 18与rotateItems的构造完全吻合,.0–9各 1 个共 12 个⇒ 来自 E1数字路径numberItems12 项✓abc各 2 个共 6 个⇒ 来自 E2 固定渲染的abcrotateItems [a,b,c]✓12 6 18✓✓⚠️为什么每种只有 1–2 个而不是全部 12 个都可见TickItem用的是overflow: hiddentranslateY被移出视口的 Text 不会被布局 dump 列出。这又一次印证了一条反复出现的盲区“用视觉手段隐藏/位移的节点dump 看不见”✓★★★ 六、其余预检结论预检项结果老写法九项✅✅全部为空propTypes✅✅完全没有⇒不存在必填 prop 无默认值的陷阱这一项被特意放在预检最前面defaultProps只有{duration: 250}Platform.OS✅空只有I18nManager.isRTL决定flexDirection实测isRTL falsemeasure()✅空量尺寸用onLayout2 处useNativeDriver✅空reanimated 不用这个参数NativeModules✅空dependencies✅空零运行时依赖prepublishOnly✅npm install不跑契约反射实测全 PASSNOTE | 默认导出的 typeof function PASS | ★ 默认导出 Ticker 是函数组件 PASS | ★ 具名导出 Tick 是函数组件 NOTE | Ticker.defaultProps 的键 duration PASS | ★ defaultProps.duration 250 NOTE | Ticker.propTypes 的键 (无 propTypes) PASS | ★★ 库没有 propTypes ⇒ 不存在必填 prop 无默认值陷阱 PASS | ★★ reanimated 可解析功能桩七、接入与预检要点# ① 装库file: 接入它没有 dependencies所以不用补装npminstallgithttps://atomgit.com/oh-react-native/react-native-ticker.git#6.0.1-ohos-1.0.0--ignore-scripts# ② 它的 peer 是 react-native-reanimated —— 二选一# (A) 接真库react-native-ohos/react-native-reanimated4.0.2 babel plugin HAR# (B) 打桩metro 的 resolver.extraNodeModules 指向功能桩本文采用八、交付包质量与基线说明类别结果交付包内容index.js5406 B编译产物index.tsx5431 B源码⇒ 都完整可读 ✓12 文件spec.json⚠️缺upstreamCommitvalidation⚠️build-pass-device-pending⚠️ 声明的基线reactNative: 0.88.0rnoh: 0.84.4⇒两字段自相矛盾备注实现零改动本轮未修改库任何文件关于基线本次验证在RN0.84.1 RNOH0.84.3上完成。库无已移除写法 ⇒结论跨基线成立✓九、已知限制与本次验证边界9.1 用这个库要知道的事项说明★★★★★ 字符集变化时会崩measureMap只累积不清理、measured不复位 ⇒ 从数字切字母或字母集变化⇒Cannot read property height of undefined★★★★ 规避保持字符集稳定或换key强制重挂载Ticker key{String(value)}★★★★ reanimated 只用 5 个 APIuseSharedValue/useAnimatedStyle/withTiming/Easing/Animated.View⇒ 功能桩可行★★★ 靠onLayout量每个字符的宽高量完全部rotateItems才measured true⇒ 首帧没有内容实测5s还是 0 个单字符 Text★★★TickItem会把rotateItems全渲染靠overflow:hiddentranslateY只露一个 ⇒dump 里只看得到 1–2 个★★ 无 propTypes没有必填 prop陷阱但也没有参数校验★ 零运行时依赖dependencies为空9.2 本次验证的边界★★★ 滚动动画的过程完全没看到reanimated 用功能桩withTiming直接到位★★★ 没有接真的 reanimated适配版react-native-ohos/react-native-reanimated4.0.2存在但未接入⇒接了真库后动画是否顺畅未知★★Tick具名导出只做了可导入/是函数的断言没做实际渲染它需要外部提供measureMap与rotateItems★★ 未验证duration取不同值的效果桩里withTiming直接返回目标值时长无意义未验证containerStyle/textStyle/textProps的更多组合未验证多字符位数如 6 位金额时的宽度补偿行为未验证I18nManager.isRTL true时的表现未在RN 0.88.0/RNOH 0.84.4上复验未测其它屏幕宽度未做跨平台对照。未改动库代码。十、常见问题Q1它在 RN 0.84 上能跑吗数字场景能跑。值123→456→12.5三个阶段都正常LogBox无通知单字符Text的数量与内容与rotateItems的构造精确吻合。但值里出现字母时会崩见第二节。Q2报Cannot read property height of undefined你让 ticker 的字符集变了例如从123变成abc。内部measureMap只累积不清理、measured不复位 ⇒ 新字符没被量过 ⇒measurement.height崩。规避字符集保持稳定或Ticker key{String(value)}…/Ticker强制重挂载。Q3为什么首帧看不到内容因为它要先用隐藏的TextonLayout把rotateItems里每个字符的宽高都量一遍全部量完才setMeasured(true)才渲染真正的滚动列。实测挂载 5 秒时单字符 Text 还是 0 个13 秒时是 18 个 ——说明这个量字过程是异步的。Q4一定要装react-native-reanimated吗理论上要它是 peer。但你也可以像我这样打一个功能桩withTiming直接返回目标值、useAnimatedStyle直接执行——结构能跑、只是没有滚动过程。如果要真动画鸿蒙适配版是react-native-ohos/react-native-reanimated4.0.2。Q5能不能只显示数字滚动不用管字母可以这也是它的设计场景。纯数字 / 带小数点 / 带千分位逗号都正常,和.本来就在numberItems里。Q6为什么布局 dump 里看不到那 12 个竖排字符TickItem用overflow: hiddentranslateY只让目标字符露出来被移出视口的节点 dump 不列。实测每种字符只看到 1–2 个12 6 18 个单字符 Text✓小结react-native-ticker是**先量字、再滚动的两段式数字翻牌组件**九项老写法全空、无propTypes、无平台分支、无measure()、零运行时依赖数字场景在鸿蒙上工作正常。最值得记下来的是这几条★★★★★ 一个可用源码解释、并用对照实验证实了的缺陷字符集一变就崩。measureMap只累积不清理、measured一旦true就不复位 ⇒ 从123切到abc时measureMap[a]是undefined⇒Cannot read property height of undefined。对照实验改成只走纯数字123→456→12.5⇒三个阶段都没有 LogBox✓✓⇒规避保持字符集稳定或换key强制重挂载。★★★★★ 桩统计可以做行为计数证据链而且能和源码结构一一对上。sharedValueCount 12⇒6 个TickItem× 2 个useSharedValue每次改值withTiming6⇒3 个字符位 × 2 个withTiminganimatedStyleCount每次6⇒3 个字符位 × 1 个useAnimatedStyle✓✓⇒给桩加按 API 分类的计数就能反推渲染了多少实例、每实例调了几次 hook✓★★★★ 抓到了状态机的时序证据。5s单字符 Text 还是 0 个、13s变成 18 个⇒ 说明measured是等所有onLayout回来才置位 ✓⇒ 也证明onLayout在 RNOH 上异步但可达✓★★★★ 把必填 prop 无默认值作为预检的第一个检查项。先确认propTypes完全没有⇒ 结构上就不可能踩那个陷阱 ⇒本轮零崩溃唯一的崩是本文发现的那个真实缺陷⇒把一个高危检查项固定在预检最前面收益立刻可见。★★★ reanimated 的用法面小决定了打桩可行性。只用 5 个 API ⇒ 一个 60 行的功能桩就能让结构跑起来代价动画过程看不见。这比硬接 HAR 省下大量时间但一定要把动画未验证写清楚。★★★ 又一次印证视觉手段做的隐藏/位移dump 看不见。TickItem全渲染 12 个 Text但overflow:hiddentranslateY⇒dump 里只看得到 1–2 个⇒别把没看到当成没渲染✓★ 零运行时依赖的库最省事dependencies为空 ⇒ 不用补装任何东西省掉了file:接入不装依赖的老坑✓本篇用到的库项内容三方库react-native-ticker上游6.0.1的鸿蒙适配版适配仓库https://atomgit.com/oh-react-native/react-native-ticker适配 TAG6.0.1-ohos-1.0.0需要 HAR / 权限 / ohpm⚠️ 其 peerreact-native-reanimated需 HAR本轮打桩未接库类型数字滚动 / 翻牌拆字 translateY运行时依赖✅dependencies为空⚠️ peer 是react-native-reanimatedprepublishOnly✅npm install不跑许可证MIT上游仓库https://github.com/browniefed/react-native-ticker★456宿主工程RNOH084Demo测试页rnAppKey TickerTestApp# 装库无 dependencies不用补装npminstallgithttps://atomgit.com/oh-react-native/react-native-ticker.git#6.0.1-ohos-1.0.0--ignore-scripts# peer 二选一接 react-native-ohos/react-native-reanimated4.0.2babel pluginHAR或打功能桩import Ticker, {Tick} from react-native-ticker; // ① 数字滚动推荐用法字符集保持稳定 Ticker duration{250} textStyle{{fontSize: 40, height: 56}}{123}/Ticker // ② 千分位 / 小数点也支持, 与 . 本来就在 numberItems 里 Ticker{1,234.5}/Ticker // ③ ★ 需要切换字符集时换 key 强制重挂载否则会崩 Ticker key{String(value)} textStyle{{fontSize: 40}}{value}/Ticker // ⚠️ 字符集变化数字→字母会导致 Cannot read property height of undefined // ⚠️ 首帧无内容要先用隐藏 Text onLayout 把每个字符量一遍 // ⚠️ 需要 react-native-reanimated可打功能桩但那样没有滚动过程 // ⚠️ TickItem 全渲染 12 个字符靠 overflow:hidden 只露一个 ⇒ dump 只看得到 1–2 个# 换页启动测试页 —— force-stop 不能省hdc shell aa force-stop com.rnoh084.demo hdc shell aa start-bcom.rnoh084.demo-aEntryAbility--psrnAppKey TickerTestApp判据的复现方式# ① 契约 reanimated 桩统计逐条 PASS/FAIL 日志hdc shellhilog -x | grep rnt-test|Select-StringPASS|FAIL|SUMMARY|NOTE# ⇒ Ticker/Tick 是函数、defaultProps.duration250、(无 propTypes)、桩统计演进# ② 文本级判据数内容是单个字符的 Textdevecocli ui layout|Select-StringText#Paragraph# ⇒ 数字路径下 , . 0..9 各 1 个 a b c 各 2 个 18 个# ③ 崩溃复现让 ticker 的值从数字切到字母 ⇒ LogBox 出现# Cannot read property height of undefined# ④ 对照只走纯数字路径 ⇒ 三个阶段都无 LogBox环境搭建本手册的验证环境是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 39vp宿主依赖⚠️react-native-reanimated用功能桩隔离宿主 HAP 产物entry-default-signed.hap本次构建assembleHap3 分 42 秒⇒ 一次成功打包与构建退出码都检查了验证规模契约 7 条全 PASS桩统计行为计数与源码结构精确对应12 / 6 / 6单字符 Text 计数与rotateItems吻合18 个状态机时序证据5s 0 个 → 13s 18 个缺陷复现 对照实验纯数字路径不崩4 张截图互异分别对应 4 个相位⚠️基线说明交付包spec.json声明RN 0.88.0 RNOH 0.84.4两字段自相矛盾本次验证在RN 0.84.1 RNOH 0.84.3上完成。本库无任何已移除写法、无平台分支 ⇒结论跨基线成立。相关社区与项目地址项目地址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-ticker数字滚动/翻牌效果适配到 HarmonyOS 的完整过程。它做的事很专一把一段文字通常是数字拆成单个字符每个字符位做成一个竖向滚轮—— 用translateY把目标字符滚到视口里于是数字变化时看起来像数字在滚动。结论数字场景纯数字/含小数点在鸿蒙上工作正常但它在字符集发生变化时会崩 —— 这是一个可以用源码解释、也用对照实验证实了的真实缺陷。★★★★★ 一、先说机制它是怎么量字又怎么滚的去掉编译产物后核心逻辑非常清楚index.js137 行// ① 把 children 拆成单字符constmeasureStringsChildren.map(children,childsplitText(${child})).reduce(...)// ② 是否含数字 ⇒ 决定轮子的内容consthasNumbersmeasureStrings.find(visNumber(v))!undefined;constnumberRangerange(10).map(pp);constnumAdditional[,,.];constnumberItems[...numberRange,...numAdditional];// [0..9, ,, .]constrotateItemsuniq([...(hasNumbers?numberItems:[]),...measureStrings]);// ③ 为 rotateItems 里每个元素渲染一个【隐藏 Text】absolute opacity:0靠 onLayout 量宽高rotateItems.map(vText style{[textStyle,styles.hide]}onLayout{ehandleMeasure(e,v)}{v}/Text)// ④ 全部量完 ⇒ measured trueif(Object.keys(measureMap.current).lengthrotateItems.length)setMeasured(true);// ⑤ 只有 measured 才渲染 TickItem{measuredtrueChildren.map(children,...)}// ⑥ TickItem把 rotateItems 全渲染成一列竖排 Text用 translateY 选一个露出来constpositiongetPosition({text:children,height:measurement.height,items:rotateItems});conststylePosuseSharedValue(position);constanimatedStylesuseAnimatedStyle(()({height:measurement.height,width:widthAnim.value,overflow:hidden,transform:[{translateY:stylePos.value}],}));⇒⇒ 这是一个先测量、再滚动的两段式状态机✓⇒measured这个状态就是本文最重要的伏笔。★★★★★ 二、核心发现字符集一变就崩Cannot read property height of undefined我的测试页用时间轴把值依次改成123→456→12.5→abc前三个阶段都正常第四阶段整页崩LogBox: Cannot read property height of undefined 此后页面上的单字符 Text 全部消失根因读源码就能推出来constmeasurementmeasureMap[children];// ★ children 变了但 measureMap 里没有它constpositiongetPosition({text:children,height:measurement.height,// ★ 这里崩items:rotateItems,});把过程走一遍阶段值hasNumbersrotateItemsmeasureMap里有什么1123true[0..9, ,, .]12 项量完这12 项⇒measured true2456true同上12 项还是那 12 项312.5true同上12 项还是那 12 项4abcfalse[a,b,c]3 项仍只有那 12 项 —— 没有a⇒measured一旦变成true就再也不会回到false源码里没有任何复位逻辑⇒ 于是第四阶段立刻去渲染TickItem而measureMap[a]是undefined⇒measurement.height崩✓✓★★★★★ 用对照实验证实纯数字路径不崩为了排除是别的原因导致崩我把时间轴改成只走纯数字123→456→12.5不切字符集再跑一遍5s值 123: 单字符 Text 数 0 LogBox: 无 ✓ 13s值 456: 单字符 Text 数 18 LogBox: 无 ✓ 21s值 12.5: LogBox: 无 ✓ ⇒ ✓✓ 纯数字路径三个阶段都没有 LogBox ⇒ 崩溃确实由【字符集变化】触发⇒⇒ 结论可靠崩因是字符集变化导致新字符没有量测结果不是随机问题✓✓顺带得到的状态机时序证据上面第一行5s 单字符 Text 数 0很有价值 —— 它说明页面挂载后measured仍然是false还在等 12 个onLayout回调到13s才变成18个单字符 Text ⇒measured已经true、TickItem开始渲染⇒onLayout在 RNOH 上确实是异步但可达的✓这个库正是靠它工作的对使用者的直接含义场景是否可用纯数字123→456、金额、计数器✅正常数字 小数点/逗号12.5、1,234✅正常,与.本来就在numberItems里数字 ⇄ 字母 混用123→abc❌崩本文发现的缺陷纯字母之间变化abc→abd⚠️ 字符集不变a,b,c→a,b,d里d是新的⇒同样会崩规避办法让 ticker 的字符集保持稳定例如始终用等宽数字、需要切字母时给 Ticker 换一个key强制重挂载Ticker key{String(value)} …{value}/Ticker {/* 换 key ⇒ 重挂载 ⇒ 重新量测 */}★★★★ 三、react-native-reanimated的处理功能桩附适配版信息它声明的 peer 是react-native-reanimated: 2.4.1原生库worklets C。但它的用法面非常小 —— 只有 5 个 APIimportAnimated,{useSharedValue,useAnimatedStyle,withTiming,Easing}fromreact-native-reanimated;鸿蒙适配版是存在的包版本react-native-ohos/react-native-reanimated4.0.2react-native-oh-tpl/react-native-reanimated3.6.4-rc.1但我这一轮选择打桩理由reanimated 需要babel plugin worklets接入不只是加 HARHAR 接入此前实测失败过一次更关键本库的核心逻辑拆字 →onLayout量宽高 →measured状态机 → 渲染TickItem全是纯 JS把 reanimated 换成瞬间到位的功能桩后渲染结构与几何仍然真实只有滚动过渡变成瞬移。桩做成了功能可用而不是空壳constuseSharedValue(initial)/* 返回稳定的 {value} 对象 */;constuseAnimatedStyle(updater)updater()||{};// 直接执行 workletconstwithTiming(toValue)toValue;// 直接到位constEasing{linear:tt,ease:tt,/* … */};constAnimated{View,Text,ScrollView,/* … */};// 直接映射 RN 组件⚠️代价必须写清楚滚动动画的过程完全没看到只有终值正确。接了真 reanimated 之后动画是否顺畅本轮未验证。★★★★★ 四、桩统计给出了一条漂亮的行为计数证据链桩会统计三个计数我在每个相位打一次 ⇒ 数字与组件的内部结构精确对应挂载初期 {sharedValueCount: 0, animatedStyleCount: 0, withTimingCount: 0} P0值 123 {sharedValueCount: 12, animatedStyleCount: 6, withTimingCount: 12} P1值 456 {sharedValueCount: 12, animatedStyleCount: 12, withTimingCount: 18} P2值 12.5 {sharedValueCount: 12, animatedStyleCount: 18, withTimingCount: 24} P3值 abc {sharedValueCount: 14, animatedStyleCount: 25, withTimingCount: 32}怎么读这些数字sharedValueCount 12⇒ 页面上一共有6 个TickItemE1 的 3 个字符位 E2 固定的abc3 个字符位每个TickItem里有两处useSharedValuewidthAnim与stylePos⇒6 × 2 12✓✓withTimingCount每次改值 6⇒3 个字符位 × 2 个withTiming位置 宽度 6✓✓animatedStyleCount每次 6⇒3 个字符位 × 1 个useAnimatedStyle 6✓✓⇒⇒ 这些计数不是跑起来了的模糊证据而是能和源码结构一一对上的整数✓✓⇒这条经验值得复用给桩加按 API 分类的计数就能反推组件内部渲染了多少个实例、每实例调了几次 hook✓★★★★ 五、文本级判据单字符 Text 的数量与内容TickItem会把rotateItems全部渲染成一列竖排Text靠translateY只让目标字符露出来。所以我直接数布局 dump 里内容是单个字符的Text单字符 Text 的种类数 15 内容 ,×1 .×1 0×1 1×1 2×1 3×1 4×1 5×1 6×1 7×1 8×1 9×1 a×2 b×2 c×2 总数 18与rotateItems的构造完全吻合,.0–9各 1 个共 12 个⇒ 来自 E1数字路径numberItems12 项✓abc各 2 个共 6 个⇒ 来自 E2 固定渲染的abcrotateItems [a,b,c]✓12 6 18✓✓⚠️为什么每种只有 1–2 个而不是全部 12 个都可见TickItem用的是overflow: hiddentranslateY被移出视口的 Text 不会被布局 dump 列出。这又一次印证了一条反复出现的盲区“用视觉手段隐藏/位移的节点dump 看不见”✓★★★ 六、其余预检结论预检项结果老写法九项✅✅全部为空propTypes✅✅完全没有⇒不存在必填 prop 无默认值的陷阱这一项被特意放在预检最前面defaultProps只有{duration: 250}Platform.OS✅空只有I18nManager.isRTL决定flexDirection实测isRTL falsemeasure()✅空量尺寸用onLayout2 处useNativeDriver✅空reanimated 不用这个参数NativeModules✅空dependencies✅空零运行时依赖prepublishOnly✅npm install不跑契约反射实测全 PASSNOTE | 默认导出的 typeof function PASS | ★ 默认导出 Ticker 是函数组件 PASS | ★ 具名导出 Tick 是函数组件 NOTE | Ticker.defaultProps 的键 duration PASS | ★ defaultProps.duration 250 NOTE | Ticker.propTypes 的键 (无 propTypes) PASS | ★★ 库没有 propTypes ⇒ 不存在必填 prop 无默认值陷阱 PASS | ★★ reanimated 可解析功能桩七、接入与预检要点# ① 装库file: 接入它没有 dependencies所以不用补装npminstallgithttps://atomgit.com/oh-react-native/react-native-ticker.git#6.0.1-ohos-1.0.0--ignore-scripts# ② 它的 peer 是 react-native-reanimated —— 二选一# (A) 接真库react-native-ohos/react-native-reanimated4.0.2 babel plugin HAR# (B) 打桩metro 的 resolver.extraNodeModules 指向功能桩本文采用八、交付包质量与基线说明类别结果交付包内容index.js5406 B编译产物index.tsx5431 B源码⇒ 都完整可读 ✓12 文件spec.json⚠️缺upstreamCommitvalidation⚠️build-pass-device-pending⚠️ 声明的基线reactNative: 0.88.0rnoh: 0.84.4⇒两字段自相矛盾备注实现零改动本轮未修改库任何文件关于基线本次验证在RN0.84.1 RNOH0.84.3上完成。库无已移除写法 ⇒结论跨基线成立✓九、已知限制与本次验证边界9.1 用这个库要知道的事项说明★★★★★ 字符集变化时会崩measureMap只累积不清理、measured不复位 ⇒ 从数字切字母或字母集变化⇒Cannot read property height of undefined★★★★ 规避保持字符集稳定或换key强制重挂载Ticker key{String(value)}★★★★ reanimated 只用 5 个 APIuseSharedValue/useAnimatedStyle/withTiming/Easing/Animated.View⇒ 功能桩可行★★★ 靠onLayout量每个字符的宽高量完全部rotateItems才measured true⇒ 首帧没有内容实测5s还是 0 个单字符 Text★★★TickItem会把rotateItems全渲染靠overflow:hiddentranslateY只露一个 ⇒dump 里只看得到 1–2 个★★ 无 propTypes没有必填 prop陷阱但也没有参数校验★ 零运行时依赖dependencies为空9.2 本次验证的边界★★★ 滚动动画的过程完全没看到reanimated 用功能桩withTiming直接到位★★★ 没有接真的 reanimated适配版react-native-ohos/react-native-reanimated4.0.2存在但未接入⇒接了真库后动画是否顺畅未知★★Tick具名导出只做了可导入/是函数的断言没做实际渲染它需要外部提供measureMap与rotateItems★★ 未验证duration取不同值的效果桩里withTiming直接返回目标值时长无意义未验证containerStyle/textStyle/textProps的更多组合未验证多字符位数如 6 位金额时的宽度补偿行为未验证I18nManager.isRTL true时的表现未在RN 0.88.0/RNOH 0.84.4上复验未测其它屏幕宽度未做跨平台对照。未改动库代码。十、常见问题Q1它在 RN 0.84 上能跑吗数字场景能跑。值123→456→12.5三个阶段都正常LogBox无通知单字符Text的数量与内容与rotateItems的构造精确吻合。但值里出现字母时会崩见第二节。Q2报Cannot read property height of undefined你让 ticker 的字符集变了例如从123变成abc。内部measureMap只累积不清理、measured不复位 ⇒ 新字符没被量过 ⇒measurement.height崩。规避字符集保持稳定或Ticker key{String(value)}…/Ticker强制重挂载。Q3为什么首帧看不到内容因为它要先用隐藏的TextonLayout把rotateItems里每个字符的宽高都量一遍全部量完才setMeasured(true)才渲染真正的滚动列。实测挂载 5 秒时单字符 Text 还是 0 个13 秒时是 18 个 ——说明这个量字过程是异步的。Q4一定要装react-native-reanimated吗理论上要它是 peer。但你也可以像我这样打一个功能桩withTiming直接返回目标值、useAnimatedStyle直接执行——结构能跑、只是没有滚动过程。如果要真动画鸿蒙适配版是react-native-ohos/react-native-reanimated4.0.2。Q5能不能只显示数字滚动不用管字母可以这也是它的设计场景。纯数字 / 带小数点 / 带千分位逗号都正常,和.本来就在numberItems里。Q6为什么布局 dump 里看不到那 12 个竖排字符TickItem用overflow: hiddentranslateY只让目标字符露出来被移出视口的节点 dump 不列。实测每种字符只看到 1–2 个12 6 18 个单字符 Text✓小结react-native-ticker是**先量字、再滚动的两段式数字翻牌组件**九项老写法全空、无propTypes、无平台分支、无measure()、零运行时依赖数字场景在鸿蒙上工作正常。最值得记下来的是这几条★★★★★ 一个可用源码解释、并用对照实验证实了的缺陷字符集一变就崩。measureMap只累积不清理、measured一旦true就不复位 ⇒ 从123切到abc时measureMap[a]是undefined⇒Cannot read property height of undefined。对照实验改成只走纯数字123→456→12.5⇒三个阶段都没有 LogBox✓✓⇒规避保持字符集稳定或换key强制重挂载。★★★★★ 桩统计可以做行为计数证据链而且能和源码结构一一对上。sharedValueCount 12⇒6 个TickItem× 2 个useSharedValue每次改值withTiming6⇒3 个字符位 × 2 个withTiminganimatedStyleCount每次6⇒3 个字符位 × 1 个useAnimatedStyle✓✓⇒给桩加按 API 分类的计数就能反推渲染了多少实例、每实例调了几次 hook✓★★★★ 抓到了状态机的时序证据。5s单字符 Text 还是 0 个、13s变成 18 个⇒ 说明measured是等所有onLayout回来才置位 ✓⇒ 也证明onLayout在 RNOH 上异步但可达✓★★★★ 把必填 prop 无默认值作为预检的第一个检查项。先确认propTypes完全没有⇒ 结构上就不可能踩那个陷阱 ⇒本轮零崩溃唯一的崩是本文发现的那个真实缺陷⇒把一个高危检查项固定在预检最前面收益立刻可见。★★★ reanimated 的用法面小决定了打桩可行性。只用 5 个 API ⇒ 一个 60 行的功能桩就能让结构跑起来代价动画过程看不见。这比硬接 HAR 省下大量时间但一定要把动画未验证写清楚。★★★ 又一次印证视觉手段做的隐藏/位移dump 看不见。TickItem全渲染 12 个 Text但overflow:hiddentranslateY⇒dump 里只看得到 1–2 个⇒别把没看到当成没渲染✓★ 零运行时依赖的库最省事dependencies为空 ⇒ 不用补装任何东西省掉了file:接入不装依赖的老坑✓本篇用到的库项内容三方库react-native-ticker上游6.0.1的鸿蒙适配版适配仓库https://atomgit.com/oh-react-native/react-native-ticker适配 TAG6.0.1-ohos-1.0.0需要 HAR / 权限 / ohpm⚠️ 其 peerreact-native-reanimated需 HAR本轮打桩未接库类型数字滚动 / 翻牌拆字 translateY运行时依赖✅dependencies为空⚠️ peer 是react-native-reanimatedprepublishOnly✅npm install不跑许可证MIT上游仓库https://github.com/browniefed/react-native-ticker★456宿主工程RNOH084Demo测试页rnAppKey TickerTestApp# 装库无 dependencies不用补装npminstallgithttps://atomgit.com/oh-react-native/react-native-ticker.git#6.0.1-ohos-1.0.0--ignore-scripts# peer 二选一接 react-native-ohos/react-native-reanimated4.0.2babel pluginHAR或打功能桩import Ticker, {Tick} from react-native-ticker; // ① 数字滚动推荐用法字符集保持稳定 Ticker duration{250} textStyle{{fontSize: 40, height: 56}}{123}/Ticker // ② 千分位 / 小数点也支持, 与 . 本来就在 numberItems 里 Ticker{1,234.5}/Ticker // ③ ★ 需要切换字符集时换 key 强制重挂载否则会崩 Ticker key{String(value)} textStyle{{fontSize: 40}}{value}/Ticker // ⚠️ 字符集变化数字→字母会导致 Cannot read property height of undefined // ⚠️ 首帧无内容要先用隐藏 Text onLayout 把每个字符量一遍 // ⚠️ 需要 react-native-reanimated可打功能桩但那样没有滚动过程 // ⚠️ TickItem 全渲染 12 个字符靠 overflow:hidden 只露一个 ⇒ dump 只看得到 1–2 个# 换页启动测试页 —— force-stop 不能省hdc shell aa force-stop com.rnoh084.demo hdc shell aa start-bcom.rnoh084.demo-aEntryAbility--psrnAppKey TickerTestApp判据的复现方式# ① 契约 reanimated 桩统计逐条 PASS/FAIL 日志hdc shellhilog -x | grep rnt-test|Select-StringPASS|FAIL|SUMMARY|NOTE# ⇒ Ticker/Tick 是函数、defaultProps.duration250、(无 propTypes)、桩统计演进# ② 文本级判据数内容是单个字符的 Textdevecocli ui layout|Select-StringText#Paragraph# ⇒ 数字路径下 , . 0..9 各 1 个 a b c 各 2 个 18 个# ③ 崩溃复现让 ticker 的值从数字切到字母 ⇒ LogBox 出现# Cannot read property height of undefined# ④ 对照只走纯数字路径 ⇒ 三个阶段都无 LogBox环境搭建本手册的验证环境是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 39vp宿主依赖⚠️react-native-reanimated用功能桩隔离宿主 HAP 产物entry-default-signed.hap本次构建assembleHap3 分 42 秒⇒ 一次成功打包与构建退出码都检查了验证规模契约 7 条全 PASS桩统计行为计数与源码结构精确对应12 / 6 / 6单字符 Text 计数与rotateItems吻合18 个状态机时序证据5s 0 个 → 13s 18 个缺陷复现 对照实验纯数字路径不崩4 张截图互异分别对应 4 个相位⚠️基线说明交付包spec.json声明RN 0.88.0 RNOH 0.84.4两字段自相矛盾本次验证在RN 0.84.1 RNOH 0.84.3上完成。本库无任何已移除写法、无平台分支 ⇒结论跨基线成立。相关社区与项目地址项目地址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
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
