React Native Chrome调试时Text加样式触发NativeUIManager错误如何解决

该报错是React Native 0.70+版本开启Hermes引擎后，Chrome调试器处理内联匿名样式对象的已知兼容性问题，可通过以下两种方法解决，同时保留Text组件的样式定义：

• 优先使用RN官方推荐的样式写法，将Text的样式抽离到StyleSheet.create中定义，避免直接传递对象字面量给style属性，修改后代码如下：

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.helloWorldContainer}>
      <Text style={styles.text}>Hello, world!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  helloWorldContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18
  }
});

export default App;

抽离到StyleSheet.create的样式会被RN生成唯一的数字ID，调试过程不需要序列化匿名对象，可完全规避该报错。

• 若确实需要使用内联样式，可对样式对象添加正确的类型断言，解决TS类型推断和Hermes调试器的序列化冲突：

// 首先从react-native导入对应类型
import {StyleSheet, Text, View, StyleProp, TextStyle} from 'react-native';

// 组件内使用断言修饰样式对象
<Text style={{fontSize: 18} as StyleProp<TextStyle>}>Hello, world!</Text>

Chrome调试器对RN的Hermes引擎兼容性较差，经常出现无意义的运行时报错，可替换为以下更稳定的调试工具：

• Flipper：RN官方主推的调试工具，新版RN项目默认集成，无需复杂配置即可使用。支持组件树查看、样式实时修改、网络请求抓包、本地存储查看、性能分析等全场景调试功能，对Hermes引擎和TS项目的兼容性远高于Chrome调试。
• React Native Debugger：集成React DevTools和Redux DevTools的独立调试客户端，完美适配RN调试协议，调试状态稳定，适合需要同时调试组件状态和全局状态的开发场景。
• 如使用Expo框架开发，Expo自带的Dev Tools也可满足日常调试需求，集成日志查看、热重载控制、设备管理等功能，上手门槛极低。

内容的提问来源于stack exchange，提问作者Pablo Arrettino