纯 ReactNative-Expo 设置，使用纯 JavaScript

Source: Dev.to

预设

• 包管理器: Bun
• SDK: 54.0.25
• 语言: JavaScript
• 命令界面: 集成在终端中的 Bash
• 操作系统: Windows

本指南中我们将使用 bun 作为包管理器。

从启动模板创建项目

degit https://github.com/Franklivania/expo-js-starter.git 

初始化一个最简的 Expo 项目

bun create expo --template blank 

进入项目目录并在编辑器中打开（示例使用 Cursor）：

cd  && cursor .

安装所需依赖

bun install \
  react-native-reanimated \
  react-native-screens \
  lucide-react-native \
  expo-haptics \
  expo-router \
  expo-image \
  expo-linking \
  expo-font \
  expo-constants \
  expo-blur \
  expo-system-ui \
  react-native-web \
  react-native-worklets \
  react-native-safe-area-context \
  @react-native-community/netinfo \
  @react-native-async-storage/async-storage@next \
  @react-navigation/bottom-tabs \
  @react-navigation/elements \
  @react-navigation/native \
  expo-splash-screen \
  react-dom \
  react-native-svg

这些包提供了纯 JavaScript Expo 应用所需的核心功能。

配置

jsconfig.json（可选）

创建或更新 jsconfig.json 以简化导入路径：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./assets/*"]
    }
  }
}

Babel (babel.config.js)

配置 Babel 使用 Expo 预设和 worklets 插件：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-worklets/plugin"]
  };
};

app.json

在 app.json 中添加所需插件（Expo Router 和启动屏幕）：

{
  "plugins": [
    "expo-router",
    [
      "expo-splash-screen",
      {
        "image": "./assets/images/splash-icon.png",
        "imageWidth": 200,
        "resizeMode": "contain",
        "backgroundColor": "#ffffff",
        "dark": {
          "backgroundColor": "#000000"
        }
      }
    ]
  ]
}

入口点

将 package.json 中的 main 字段更新为指向 Expo Router 入口：

{
  "main": "expo-router/entry"
}

Expo 会自动定位你的布局文件（例如 /app/_layout.jsx 或 /src/app/_layout.jsx）。

验证依赖兼容性

运行 Expo doctor 检查版本不匹配：

bunx expo-doctor

如果报告问题，使用以下命令修复：

bunx expo install --check

确认所有内容兼容后，你可以安全地删除默认的 index.js 和 App.js 文件。

最后说明

就这样！你现在已经搭建好一个不带默认 TypeScript 配置的纯 JavaScript Expo 项目。祝编码愉快！ 🍻💻