React Native 是一个基于 JavaScript 的开源框架，支持使用一套代码构建 iOS 、Android 和 Web 应用。Expo 则是围绕 React Native 构建的一套工具和服务，提供了一种更简便的开发体验。
核心对比
| 特性 | React Native CLI | Expo |
|---|---|---|
| 学习曲线 | 较陡，需要配置 Xcode 或 Android Studio | 平缓，使用 Expo Go 即可快速启动 |
| 项目启动速度 | 慢，需要较多依赖安装 | 快，仅需 Node.js 和手机或模拟器 |
| 社区支持和扩展性 | 强，自由配置 | 强，但受限于 Expo 生态 |
| 构建和打包 | 手动配置 | 提供托管的打包服务 |
| 原生模块支持 | 灵活，但需要手动集成 | 有限，但支持 EAS (Expo Application Services) 解决方案 |
适用场景
- React Native CLI：适合有移动开发经验或对原生模块有较高定制化需求的开发者。
- Expo：更适合快速构建 MVP（Minimum Viable Product）或移动开发新手。
搭建 Expo 项目
创建项目
使用以下命令快速创建一个 Expo 项目：
npx create-expo-app@latest expo-app
创建项目后，进入项目目录：
cd expo-app
启动开发服务器：
npx expo start
删除样板代码并重新开始新项目。运行以下命令重置你的项目：
npm run reset-project
预构建
在编译原生应用之前，原生源代码需要存在。Expo CLI 提供了一个名为 prebuild 的独特而强大的系统，它根据四个因素为你的项目生成原生代码：
- 应用配置 文件（app.json、app.config.js）。
- 传递给
npx expo prebuild命令的参数。 - 项目中安装的
expo版本及其对应的 预构建模板。 - 自动链接，用于链接在 package.json 中找到的 原生模块。 用法
可以通过运行以下命令来使用预构建：
npx expo prebuild
expo网站打包安卓项目
- 设置应用包名，修改项目中的app.json文件
- 另开一个窗口执行下面指令，开始打包
expo build:android
-
打包完成，会生成一个链接。点击其中的链接会转到expo官网上，需要登录你自己的expo账号
-
选择对应包下载就可以把打包好的apk下载到电脑上，再转发到需要安装的手机上
本地打包安卓项目
1. 安装java jdk
java -version
如果显示版本信息，说明JDK安装和配置基本正确。
2. 配置jkeytool环境变量
keytool -help
如果显示相关信息，说明keytool配置基本正确。 否则，需要进入系统-高级配置-环境变量-系统变量，选择Path-编辑，添加 C:\Program Files\Java\jdk-17\bin
说明： keytool 是 JDK 自带的工具，在C:\Program Files\Java\jdk-17\bin目录下
3. 生成android用于发布的密钥文件
keytool -genkey -v -keystore expo-app-key.keystore -alias expo-key-alias -keyalg RSA -keysize 2048 -validity 10000
4. android/gradle.properties 添加密钥变量
MYAPP_UPLOAD_STORE_FILE=expo-app-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=expo-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****
5. android/app/build.gradle 添加密钥配置
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
6. 构建Android应用(aab)
cd android
./gradlew app:bundleRelease
7. 生成发行 APK 包
cd android
./gradlew assembleRelease
Expo 中使用Ant Design组件
安装组件
expo install @ant-design/react-native
按需加载配置
expo install babel-plugin-import 命令添加插件
// .babelrc or babel-loader option
{
"plugins": [
["import", { libraryName: "@ant-design/react-native" }]
]
}
然后改变从 @ant-design/react-native 引入模块方式即可。
import { Button } from '@ant-design/react-native';
Ant Design文档
rn.mobile.ant.design/docs/react/…
本地构建web项目
1. 构建web项目包
npx expo export -p web
2. 本地预览生产项目
npx expo serve
学习文档
- 英文文档 docs.expo.dev/
- 中文文档 expo.nodejs.cn/
