React Native生成动画组件视频并获取URI用于分享保存方案咨询

iOS 原生实现方案 #

• 捕获动画视图：通过React Native组件的tag获取对应的原生UIView实例，用CADisplayLink同步屏幕刷新频率，每触发一次就调用drawHierarchy(in:afterScreenUpdates:)对目标视图做快照，将快照转为像素缓冲区。
• 配置视频写入器：初始化AVAssetWriter，输出路径设为沙盒临时文件，指定MP4格式，配置与组件尺寸匹配的分辨率、30fps帧率及合适比特率，创建AVAssetWriterInputPixelBufferAdaptor作为像素缓冲区写入通道。
• 录制与收尾：启动AVAssetWriter后，在CADisplayLink回调中逐帧写入像素缓冲区到视频流。动画结束或达到8秒时长时，停止CADisplayLink和AVAssetWriter，生成视频文件并返回沙盒内的文件URI。
• 分享与保存：调用UISaveVideoAtPathToSavedPhotosAlbum将视频存入系统相册，或通过UIActivityViewController发起分享，传入视频URI即可。

Android 原生实现方案 #

• 获取目标视图：通过React Native组件的tag找到对应的原生View实例，若动画基于Animated或自定义实现，可将视图挂载到TextureView上，便于后续录制。
• 配置MediaRecorder：初始化MediaRecorder，设置MP4输出格式、H.264视频编码器，分辨率匹配组件尺寸、30fps帧率，指定输出路径为应用私有目录或公共媒体目录。
• 录制动画：将TextureView的Surface传给MediaRecorder作为输入源，启动录制。监听动画结束回调或设置8秒定时器，时间到后停止录制并释放资源，得到视频文件URI。
• 分享与保存：若保存到相册，通过MediaStore将视频插入媒体库；分享则通过Intent启动系统分享界面，传入视频的content URI。

React Native 桥接层适配 #

• 编写Native Module，向JS层暴露三个核心方法：startRecording(componentTag)（传入组件标识启动录制）、stopRecording()（停止录制并返回URI）、saveToGallery(uri)（保存到系统相册）。
• JS层在动画开始前调用startRecording，动画结束或达到8秒时调用stopRecording，通过回调获取视频URI后，调用分享组件或保存方法完成后续操作。

内容的提问来源于stack exchange，提问作者João Lucas Lima