React Native组件首字母已大写仍提示<Text>标签不被浏览器识别如何解决

该报错与组件首字母大小写无关，核心问题是React Native 组件被错误加载到了浏览器 React DOM 运行环境，从报错栈中的react-dom依赖、jest/mockComponent两个特征即可定位问题方向。

排查步骤 #

• 确认触发场景：如果是启动Web端服务后报错，说明项目为RN+Web多端适配项目，未正确配置React Native for Web的别名转换规则。RN内置的Text/View等原生组件在Web环境下需要替换为react-native-web提供的兼容实现，未配置别名时，Web打包工具会直接加载RN包内的jest mock组件，被react-dom判定为非法HTML标签触发告警。
• 如果是运行单元测试时触发报错，说明jest配置未正确处理RN组件的mock规则，或是错误使用了react-dom的测试渲染器渲染RN组件。
• 检查组件导入语句：确认所有Text/View组件均从react-native包导入，无导入路径手误。

解决方法 #

Web端运行报错解决 #

1. 给Web打包工具（webpack/vite等）配置别名，将react-native的导入指向react-native-web：
   webpack配置示例（在webpack.config.js的resolve.alias中添加）：

alias: {
  'react-native$': 'react-native-web',
}

vite配置示例（在vite.config.js的resolve.alias中添加）：

alias: {
  'react-native': 'react-native-web',
}

2. 确认已安装react-native-web依赖，未安装可执行：
   npm install react-native-web 或 yarn add react-native-web

单元测试报错解决 #

• 检查测试用例使用的渲染器，需用react-test-renderer或@testing-library/react-native的渲染器，不可使用@testing-library/react的浏览器端渲染器。
• 确认jest配置中已添加RN预设：

{
  "preset": "react-native"
}

• 如自定义过RN组件的mock规则，检查是否覆盖了内置组件的默认mock实现。

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