React Native用@ant-design/react-native TabBar组件运行Android模拟器报错解决

代码语法层面的优先修复 #

你提供的Footer组件代码存在明确的JSX语法错误，是触发编译失败的直接诱因：

• 定位到"My"页签对应的TabBar.Item节点，在子元素起始位置误插入了多余的空字符串标记：

  <TabBar.Item
    icon={<Icon name="user" />}
    title="My"
    selected={selectedTab === 'yellowTab'}
    onPress={() => onChangeTab('yellowTab')}
  >""
    {renderContent('My Tab')}
  </TabBar.Item>
  

• 修复操作：删除这段冗余的""空字符串，保证TabBar.Item的子节点仅保留合法JSX渲染内容。

两类构建报错的对应排查步骤 #

首次构建阶段的初始报错 #

这类报错多由原生依赖配置不全导致：

• 核对@ant-design/react-native版本与当前React Native、Android SDK的版本兼容性，避免跨大版本适配缺失
• 确认Icon组件依赖的字体资源已正确同步到Android项目的assets目录，未引入字体会直接触发组件渲染异常
• 执行cd android && ./gradlew clean清理历史构建缓存，重启Metro服务后重新构建Android安装包

补充依赖后的二次报错 #

这类报错多由依赖冲突、本地缓存损坏导致：

• 检查package.json内的依赖配置，排查是否存在多版本重复安装的同个包，统一所有依赖的版本号
• 执行全量依赖重装：删除node_modules目录、本地锁文件（yarn.lock/package-lock.json）后重新安装依赖，避免损坏的本地缓存包触发编译异常
• 检查Android项目build.gradle配置，确认minSdkVersion满足@ant-design/react-native的最低版本要求，配置版本过低会触发原生编译失败

提问提交阶段遇到的无法提交问题，通常由截图体积过大、平台接口临时波动导致，压缩截图大小后即可正常尝试提交。

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