Expo集成React-Bootstrap失败：无法解析react/jsx-runtime模块

你踩了个很常见的坑：react-bootstrap是专门为Web端React应用设计的组件库，完全不兼容React Native/Expo环境。它依赖Web端的DOM API、CSS模块等特性，而React Native用的是原生组件体系（比如View、Text），两者底层运行环境差异极大，这才导致了模块解析失败的错误。

1. 清理不兼容的依赖 #

首先把已安装的react-bootstrap和bootstrap删掉，避免后续冲突：

npm uninstall react-bootstrap bootstrap

2. 选择适配Expo的React Native UI组件库 #

推荐几个成熟且适配Expo的替代方案，按需选择：

• Expo官方组件：@expo/vector-icons、expo-linear-gradient等，官方维护，兼容性拉满，适合基础UI需求
• NativeBase：风格接近Bootstrap，组件丰富，支持响应式，对Expo友好
• React Native Paper：Material Design风格，组件设计规范，上手简单
• NativeWind：把Tailwind CSS的写法带到React Native里，适合喜欢原子化样式的开发者

3. 实操示例：用NativeBase实现按钮 #

以NativeBase为例，快速替换原来的Bootstrap按钮：

1. 安装依赖：

expo install native-base @react-native-vector-icons

2. 在App.js中导入并使用：

import { NativeBaseProvider, Button } from 'native-base';

export default function App() {
  return (
    <NativeBaseProvider>
      <Button onPress={() => console.log('按钮被点击了')}>
        我的按钮
      </Button>
    </NativeBaseProvider>
  );
}

• 你之前遇到的fsevents警告可以忽略，这是macOS专属的可选依赖，Windows环境下跳过是正常的
• 关于npm audit提示的漏洞，开发环境下如果不影响功能可以暂时忽略，或者执行npm audit fix尝试自动修复，但这不是导致当前组件报错的原因

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