如何为已有React Native项目及集成Native Base的项目添加Expo？

嘿，我来帮你搞定给两个现有项目（普通RN项目和集成了Native Base的项目）添加Expo的事儿，这样你就能用上Expo的便捷测试工具啦！下面分两种情况一步步来：

一、给普通已有React Native项目添加Expo #

• 第一步：进入项目根目录，先安装Expo核心依赖
  在终端运行：

  npm install expo
  # 或者用yarn
  yarn add expo
  

• 第二步：将现有项目适配为Expo兼容结构
  运行这个命令，它会自动帮你生成Expo所需的配置文件（比如app.json、适配babel.config.js等）：

  npx expo init --existing .
  

• 第三步：更新package.json的脚本命令
  把原来的启动脚本替换成Expo的命令，方便后续运行：

  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  }
  

• 第四步：测试运行
  执行npm start（或yarn start），终端会弹出Expo的启动界面，你可以用手机上的Expo GoAPP扫码，就能直接在真机上测试你的应用啦！

二、给集成了Native Base的React Native项目添加Expo #

Native Base本身对Expo有很好的支持，步骤和上面类似，但需要额外处理字体和依赖的适配：

• 第一步：同样先安装Expo核心依赖

  npm install expo
  # 或者yarn add expo
  

• 第二步：适配Expo项目结构
  运行同样的命令来生成Expo配置：

  npx expo init --existing .
  

• 第三步：安装Native Base所需的Expo依赖
  Native Base需要Expo的字体和启动屏支持，执行：

  npx expo install expo-font expo-splash-screen
  

• 第四步：调整应用入口文件（比如App.js）
  确保Native Base的字体正确加载，并且用NativeBaseProvider包裹你的应用内容，示例代码如下：

  import { StatusBar } from 'expo-status-bar';
  import { useFonts } from 'expo-font';
  import { NativeBaseProvider } from 'native-base';
  // 导入你的实际应用内容组件
  import MainApp from './src/MainApp';
  
  export default function App() {
    // 加载Native Base所需的字体
    const [fontsLoaded] = useFonts({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
  
    // 字体未加载时可以显示加载状态
    if (!fontsLoaded) {
      return null;
    }
  
    return (
      <NativeBaseProvider>
        <MainApp />
        <StatusBar style="auto" />
      </NativeBaseProvider>
    );
  }
  

• 第五步：更新脚本并测试
  和普通项目一样，替换package.json的脚本，然后运行npm start，用Expo Go扫码测试即可。

额外注意事项 #

如果你的项目里用到了自定义原生模块（非Expo官方支持的），可以运行npx expo prebuild来生成对应的原生Android/iOS目录，这样既能保留原生模块的功能，又能继续使用Expo的测试工具。

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