React Native Chrome调试时报reanimated 2未安装错误如何解决

组件状态继承问题解决 #

该问题是React列表渲染的典型问题，原因是你在渲染组件列表时没有给每个组件绑定唯一且稳定的key属性。React的Diff算法会通过key识别组件实例，如果你没有设置key、或者直接用数组下标index作为key，删除第一个组件后后续组件的index会整体前移，React会认为后续组件是原来前序位置的组件，直接复用旧组件的状态，就会出现你遇到的状态继承问题。

• 解决方案：给每个列表渲染的组件绑定唯一的业务id作为key，不要使用数组下标作为key即可解决该问题。

Reanimated 2 Chrome调试崩溃问题解决 #

首先明确：该报错不是你的安装配置错误，是Reanimated 2的固有特性导致的。Reanimated 2依赖JSI（JavaScript Interface）实现JS与原生侧的同步通信，而传统的「Debug with Chrome」模式是将JS代码运行在Chrome的V8引擎中，通过远程代理和原生端通信，天生不支持JSI相关能力，因此会触发安装校验失败的报错，你的现有配置是完全正确的。
可选择以下任意方案解决：

• 更换调试工具：使用React Native官方推荐的Flipper作为调试工具，Reanimated 2完全兼容Flipper的所有调试能力，可正常查看日志、调试网络、检查组件树。
• 使用Hermes引擎调试：如果你的项目开启了Hermes引擎，可选择「Debug with Chrome (Hermes)」选项（不同RN版本命名略有差异），该模式下Chrome会直接连接设备/模拟器内的Hermes引擎，支持JSI特性，可正常调试使用Reanimated 2的项目。
• 临时兼容方案：如果必须使用传统Chrome调试模式，可临时将react-native-reanimated降级到1.x版本，该版本不依赖JSI，兼容传统调试模式，调试完成后再切回2.x版本即可。
• 缓存清理校验：如果尝试上述方案后仍有问题，可执行缓存清理命令重启项目：npx react-native start --reset-cache，iOS端可同时清空Xcode的DerivedData目录后重新编译运行。

内容的提问来源于stack exchange，提问作者John Doah