去年年底我把一个老的 React Native 项目往鸿蒙设备上迁移中途顺手做了一个模拟电风扇的小 Demo。做完之后我发现这个看似简单的 Demo 其实把 RN 里最常用的一批能力全过了一遍组件的生命周期、Animated 动画、手势交互、状态管理还有在鸿蒙工程里怎么正确配置原生依赖。如果你正准备入门 React Native 鸿蒙跨平台开发拿“电风扇”练手比一上来就做商城、聊天应用要合适得多——它既有具象的 UI 可画又有明确的交互逻辑还能逼着你去处理动画和状态同步的细节。这篇文章我就把这个模拟电风扇从设计到上手的完整过程拆开讲包括功能需求分析、工程环境准备、核心代码实现、以及我在真机和模拟器上踩过的坑。文章里给的方案是基于我当时实际跑通的完整链路你拿过去可以直接照着敲也能根据自己设备的情况做替换。1. 项目设计与技术选型1.1 为什么选择 React Native 来做鸿蒙场景先回答一个很多人会问的问题既然目标是鸿蒙设备为什么不直接用 ArkUI 或者原生开发答案是看你的团队和代码资产。我手里的 RN 组件库、业务逻辑、状态管理代码已经沉淀了两三年如果为了鸿蒙单独维护一套原生代码后续两个平台的功能同步会变成噩梦。React Native 的鸿蒙适配层做的就是把这套 JS 逻辑原样跑在鸿蒙的运行时上UI 部分通过桥接层映射成 ArkUI 的组件这样业务代码可以继续复用差异只留在底层适配。React Native 在鸿蒙上不是简单的“能跑”它需要通过鸿蒙侧的容器来加载 JS 引擎并完成 JS 与 ArkUI 之间的通信。这个通信机制和 iOS/Android 上的 Bridge 本质是一样的只是桥的另一端从原生 View 体系换成了 ArkUI 的组件树。你写 JSX 时可能感受不到区别但一旦涉及到自定义原生模块就会明显感觉到鸿蒙侧的接口风格和其他平台不太一样。选型时不能只盯着 UI 表现还要看你需要的第三方原生模块在鸿蒙上有没有对应的适配版本。1.2 模拟电风扇的功能需求拆解先别急着写代码我们把电风扇的功能拆干净。一台真实的风扇有几个关键交互开关、风速档位调节、摇头可选、定时。作为入门 Demo我建议把“定时”去掉保留三个核心功能电源开关按下开机风扇叶片开始旋转再次按下关机叶片停止。三档风速低、中、高对应叶片不同转速。摇头动画一个水平往复转动的动画决定“吹风”的方向。这三个功能组合起来覆盖了 React Native 开发中最常用的技术点按钮与状态管理开关、Animated 动画旋转、动画参数动态修改档位切换、手势或按钮触发多组动画协同摇头与旋转并行。UI 上只需要三部分风扇正面外框、叶片、中心轴、底部速度档位按钮、摇头开关。如果用静态图也能做但为了练手我建议叶片和摇头部分都用 Animated 控制这样能真正理解动画驱动视图的底层逻辑。功能拆解还有一个隐藏的收益它能帮你在写代码之前先定义清楚状态。风扇的每个部件受什么状态影响、状态变化时哪些动画跟着变这些梳理清楚了后面实现起来基本不会推翻重写。2. 环境准备与工程创建2.1 开发环境搭建清单React Native 鸿蒙开发需要准备的工具比普通 RN 多一层但流程不复杂。我这里按顺序列一下装的时候跟着走就行。工具用途建议版本Node.js运行 RN CLI 和 JS 构建工具链16 以上 LTS 版本React Native CLI创建和管理 RN 工程最新稳定版鸿蒙 SDK提供鸿蒙侧编译和安装支持HarmonyOS 对应版本鸿蒙开发者工具编译、签名、安装到设备或模拟器与 SDK 匹配模拟器或真机运行和调试目标推荐真机模拟器网络更容易卡这里要强调一下RN 官方 CLI 默认生成的工程是 Android/iOS 结构的需要在工程里额外添加鸿蒙的适配工程目录。这个目录一般由适配库的脚手架工具生成比如react-native-ohos/react-native-harmony这类包。具体包名和版本会随生态更新变化你自己配置时以当前发布的适配版本为准。配置环境最容易出错的地方是版本匹配。React Native 版本、鸿蒙 SDK 版本、适配层版本三者必须有一一对应的兼容关系。我在配置时遇到过一个典型问题RN 用了较新的 0.7x适配层还是旧版结果 JS 侧的初始化方法找不到直接白屏。后来严格按适配库官方文档指定的版本组合重装才跑通。建议你在初始化工程之前先去查对应的适配文档记下它明确支持的一整套版本号不要凭直觉搞“最新版组合”。2.2 创建 React Native 工程并接入鸿蒙创建工程我分两步走。第一步是用 RN CLI 初始化标准工程第二步是跑鸿蒙适配脚本生成鸿蒙入口。初始化工程npx react-native init ElectricFanDemo cd ElectricFanDemo这个命令会生成一个完整的 RN 工程包含android、ios和核心App.js。接下来安装鸿蒙适配层相关的依赖具体包名可以按适配文档里的说明安装。装完之后执行适配脚本npx react-native-harmony-init脚本会在工程根目录下生成一个harmony目录里面是完整的鸿蒙原生工程包括entry模块和桥接配置。你可以直接用鸿蒙开发者工具打开这个harmony目录把它当成一个普通鸿蒙工程来构建。这里有个细节生成的鸿蒙工程默认的包名和签名信息只是为了让你能编译真机安装前需要在工程配置里改成自己的包名并用正确签名的证书配置。否则打出来的包可能装不上真机只能跑模拟器。对于入门项目先用模拟器跑通是最省事的因为模拟器一般不校验签名配置门槛低很多。3. 核心实现电风扇的 UI 与交互逻辑3.1 页面整体布局与静态组件搭建UI 设计我走的是简洁路线下半部分放三个风速档位按钮和一个摇头开关上半部分是风扇主体。风扇主体由三部分叠加组成底座圆环外框、三个叶片组成的旋转体、中心固定圆盖。在 React Native 中我直接用View做布局容器叶片用三个View拼出来。每个叶片是一个设置了borderRadius的长条以中心点为轴心旋转固定角度后分布在三个方向上。为了能做旋转动画叶片需要包在一个可旋转的容器里再把中心圆盖盖在旋转容器上方形成风扇视觉。看一段最核心的静态结构function FanBody({ rotation, oscillate }) { return ( View style{styles.fanContainer} {/* 外框 */} View style{styles.outerRing} / {/* 旋转部分 */} Animated.View style{[ styles.bladeWrapper, { transform: [ { rotate: rotation }, { translateX: oscillate }, ], }, ]} View style{[styles.blade, styles.bladeTop]} / View style{[styles.blade, styles.bladeRight]} / View style{[styles.blade, styles.bladeLeft]} / /Animated.View {/* 中心盖 */} View style{styles.centerCap} / /View ); }bladeWrapper是整个旋转体的容器rotation是叶片自身的旋转角度oscillate是摇头时的水平位移。注意这里的transform同时挂了两个动画属性这在处理类似“旋转 摇头”的组合动画时很常用一定要保证它们是两个独立的 Animated.Value而不是拼在一个值里。3.2 用 Animated 实现叶片旋转动画旋转动画我用Animated.loop套Animated.timing来做。核心思路是定义一个Animated.Value代表角度从 0 到 1 循环变化再用插值函数把 01 映射成 0deg360deg。为什么不用角度值直接循环因为 Animated.Value 的驱动是时间轴上的插值循环 0 到 1 比循环 0 到 360 更好控制速度倍率。第一版实现const rotation useRef(new Animated.Value(0)).current; const spin Animated.loop( Animated.timing(rotation, { toValue: 1, duration: 1000, easing: Easing.linear, useNativeDriver: false, }) );这里的duration我写的是 1000 毫秒表示叶片转一圈需要 1 秒。风速档位的本质就是修改这个duration的值低档 1200ms、中档 800ms、高档 500ms。但这里有个坑Animated.loop一旦启动它的参数就是固定的你中途改了duration并不会生效必须重新创建循环动画并启动。我当时的做法是写一个startSpin(speed)函数先停止旧的循环再用新的duration创建新的动画。另一个注意点是useNativeDriver。RN 的老版本里旋转动画可以开 native driver 让动画在 UI 线程跑但在鸿蒙适配环境下原生驱动的支持完善程度不一我实测下来用false走 JS 驱动最稳不会出现动画卡住不动的情况。代价是动画可能消耗稍多一点 JS 线程资源但一个电风扇 Demo 完全能接受。如果你发现叶片旋转时整个界面掉帧优先检查是不是有大量不必要的setState在同步触发。动画本身只要不打日志、不频繁更新其他组件JS 驱动跑 500ms 一圈的旋转也足够流畅。3.3 档位控制与状态管理风速档位对应动画速度开关按钮控制动画启停。这部分我用 React 的useState管理档位和电源状态然后用useEffect监听状态变化重新创建并启动动画。完整的状态联动逻辑如下const [power, setPower] useState(false); const [speed, setSpeed] useState(1); useEffect(() { if (!power) { spinRef.current?.stop(); rotation.setValue(0); return; } const durationMap { 1: 1200, 2: 800, 3: 500 }; const newSpin Animated.loop( Animated.timing(rotation, { toValue: 1, duration: durationMap[speed], easing: Easing.linear, useNativeDriver: false, }) ); newSpin.start(); spinRef.current newSpin; }, [power, speed]);spinRef.current存放当前运行的动画实例关闭电源时调用stop()停止动画并把rotation重置为 0这样下次开机叶片会从初始位置重新开始转。如果不重置开机时会从上次停止的角度接着转看起来倒也没问题但重置一下更符合物理风扇的行为。档位按钮我用了三个独立的Pressable点击后setSpeed(n)。同时把档位按钮的选中状态用样式区分出来选中的档位使用高亮背景没选中的用灰色。这个交互虽然简单但它在视觉上给了用户即时反馈是 UI 细节里很重要的一块。关于状态管理再啰嗦一句如果你是写大型应用的人可能会觉得这种两个状态的逻辑用 Redux 或 Zustand 很重但在这个场景里React 自带的useState已经足够。项目再大一点需要跨页面共享风扇状态时再考虑引入全局状态库。入门阶段先把本地状态玩熟比生搬硬套状态管理方案更有价值。3.4 摇头动画实现与组合动画控制摇头功能模拟的是风扇左右往复摆动。按理说摇头应该是一个绕着垂直轴旋转的动画但在 2D 平面 View 里没法真实模拟三维旋转所以用水平位移来“假扮”摇头风扇主体在水平方向上来回移动一小段距离同时配合一个很小的旋转角度视觉上就有“转头吹风”的感觉。摇头动画我同样用 Animated.Value 来做循环 01再用插值映射成左右位移const oscillate useRef(new Animated.Value(0)).current; const rock Animated.loop( Animated.sequence([ Animated.timing(oscillate, { toValue: 1, duration: 800, easing: Easing.inOut(Easing.quad), useNativeDriver: false, }), Animated.timing(oscillate, { toValue: 0, duration: 800, easing: Easing.inOut(Easing.quad), useNativeDriver: false, }), ]) );在渲染时摇头位移通过插值映射成translateX的像素值const translateX oscillate.interpolate({ inputRange: [0, 1], outputRange: [-15, 15], });这里interpolate的作用是把动画值的变化范围映射成实际属性变化的区间。0 对应左偏 15 像素1 对应右偏 15 像素。配合Animated.sequence动画会先左到右再右到左循环往复。现在问题来了风扇旋转和摇头是两个独立动画怎么保证开关风扇时能同时控制它们我的做法是让摇头的开关独立于电源。电源关闭时旋转动画停但摇头动画仍然可以保持启动状态电源再次打开时叶片旋转直接恢复。这样设计更接近真实风扇——即使不转也可以摇头。在 useEffect 中分别监听两个开关状态只在对应状态变化时启动或停止对应动画。组合动画还有一个容易被忽略的坑如果两个动画同时操作同一个组件的 transform你会发现在内层组件上写两个动画属性时其中一个可能不生效。正确的习惯是把旋转动画放在内层叶片容器上把摇头动画放在外层包装容器上让它们修改不同层级组件的 transform互不干扰。4. 在鸿蒙设备上运行与调试4.1 构建鸿蒙工程并安装到模拟器当 JS 侧的代码写完下一步就是把整个工程构建成鸿蒙应用。我在模拟器上跑通的流程是这样的先确保鸿蒙开发者工具能识别到你生成的harmony目录然后选择模拟器运行。启动并编译后开发者工具会把 JS Bundle 打入应用包所以你在开发过程中修改了App.js里的代码需要重新构建才能生效。这里有个比较麻烦的点鸿蒙模拟器不能直接访问你电脑本地 Metro 服务的端口除非你做网络映射。入门阶段我建议不依赖 Metro直接把 Bundle 打包进应用也就是所谓的“离线包”。做法是在编译前执行npx react-native bundle --platform harmony --dev false --entry-file index.js --bundle-output harmony/entry/src/main/ets/pages/index.bundle --assets-dest harmony/entry/src/main/ets/pages/assets命令执行完成后鸿蒙工程里就有了最新 JS 代码的离线 Bundle。接着用开发者工具构建安装App 就能独立运行。如果你后续想开启热更新再研究 Metro 与鸿蒙模拟器的端口转发刚开始没必要折腾离线 Bundle 够用。构建时间通常取决于机器的性能第一次全量编译需要几分钟。如果编译报错优先看错误日志指向的是 JS 侧还是鸿蒙侧大部分问题集中在包的兼容性和资源的路径引用上。4.2 常见问题与排查技巧我把自己在跑这个电风扇 Demo 时遇到的真实问题整理成了一张表按出现频率排序问题现象可能原因解决方式启动后白屏无报错JS Bundle 与鸿蒙入口不匹配重新执行离线打包命令确认输出路径正确叶片旋转动画卡顿useNativeDriver设为 true 且鸿蒙适配不支持改成useNativeDriver: false用 JS 驱动摇头动画和旋转动画互相拉扯两个动画设置在同一个组件的 transform 上把摇头放在外层容器旋转放在内层容器档位切换后速度不变旧动画没停新动画没启在 useEffect 中先调用旧动画的stop()再创建新动画模拟器上图片资源显示不出来资源路径未被打进离线包检查 assets-dest 目录是否被鸿蒙工程打包排查问题要善于利用日志。你可以把console.log写在useEffect里看看当前的 power、speed 值是否按预期变化。鸿蒙开发者工具的日志面板能看到 JS 侧的输出我就是在档位切换发现 log 没有更新才定位到动画没有正确重启这个问题。真机调试时如果遇到安装失败大多是签名问题。检查鸿蒙工程里的签名配置是否填写了正确的证书信息。如果是个人开发使用默认的调试证书一般也能装上只要设备允许安装未上架应用。5. 实操经验与优化思路5.1 动画性能优化心得这个 Demo 做完后我重新审视了动画的性能表现。使用useNativeDriver: false虽然稳定但所有动画计算都跑在 JS 线程意味着如果你的界面里有很多组件同时更新可能出现掉帧。电风扇 Demo 组件少不会有压力但你应该清楚不同驱动方式的取舍。如果要在鸿蒙上追求更流畅的动画可以关注适配层对useNativeDriver的支持进展。一旦原生驱动稳定把useNativeDriver打开动画就能完全脱离 JS 线程大幅降低卡顿风险。我在迁移其他项目时也测试过部分动画原生驱动的行为发现只要动画属性是纯 transform 或 opacity不受布局影响原生驱动的表现就会很好。等这个能力完善后电风扇的旋转动画完全可以直接切到原生驱动。另外一点动画中的duration尽量做映射表管理不要散落在代码各处。我用一个对象集中存放档位对应的时长后续要调整手感直接改一处就行。如果没有这种习惯改着改着自己就乱了。5.2 从电风扇 Demo 扩展到真实业务别小看这个电风扇它的模式可以直接迁移到很多真实业务场景。转速档位本质上是一个多状态切换的 UI 模型摇头动画本质上是一个周期性往返动画。两者结合可以套出很多组件分段进度指示器把档位换成进度段旋转动画换成进度增长动画。开关控制设备状态IoT 场景里远程控制设备的开关、模式和这个 Demo 的交互逻辑一模一样。循环轮播图片把风扇叶片换成图片 List旋转动画换成水平平移动画就变成自动轮播图。我后来做的一个设备控制面板里就复用了这个 Demo 的“开关 档位 周期动画”整体架构开关控制设备电源档位控制设备工作模式周期性位移动画做设备状态的呼吸反馈。只要把“电风扇叶片”替换成对应的业务 UI剩下的逻辑几乎不动。5.3 给初学者的建议如果你刚开始接触 React Native 鸿蒙开发不要直接照着大型项目的架构去学先把手上的小 Demo 做得足够完整。完成这个电风扇项目你应该能掌握七件事创建 RN 工程、接入鸿蒙适配层、使用 Animated 做循环动画、使用 interpolation 做属性映射、管理动画生命周期、处理状态切换、打包到鸿蒙设备运行。这七件事是跨平台开发的基础骨架之后再学网络请求、导航、数据持久化就不会觉得云雾缭绕。我个人的体会是动画和状态管理是 React Native 里最值得花时间的地方因为几乎所有 UI 交互都可以归纳成“状态驱动动画”这一种模式。你把这个电风扇做透后面遇到转账动画、下拉刷新、轮播图思路都是一通百通。最后分享一个调试小技巧写动画代码时先把duration调得很大比如 5000ms你会看清楚动画每一帧的动作轨迹确认位置变化逻辑正确后再把速度调回来。这套方法我用过无数次比盯着代码推导坐标高效得多。你在入门阶段遇到任何动画表现不符合预期不妨先试试这个“放慢看轨迹”的土办法。