悠悠楠杉
网站页面
ReactNative环境搭建指南：从零到一打造跨平台移动应用
06/14
1. 准备工作
在开始之前，请确保你的计算机上已安装以下软件：
- Node.js：React Native依赖于Node.js，用于执行JavaScript代码和安装依赖包。请访问nodejs.org下载并安装最新版。
- Watchman：一个由Facebook开发的文件系统监控工具，用于提升React Native应用的性能。可以通过brew install watchman（MacOS）或相应包管理器安装。
- Xcode（对于Mac）或 Android Studio（跨平台）：用于编译和运行应用在iOS或Android平台上。
- Git：用于版本控制。推荐使用Git进行项目管理。
2. 安装React Native CLI
打开终端（Mac/Linux）或命令提示符（Windows），执行以下命令以全局安装React Native CLI：
bash
npm install -g react-native-cli
此命令将React Native CLI安装到你的计算机上，使你能够从任何位置运行React Native相关的命令。
3. 创建新的React Native项目
使用以下命令创建一个新的React Native项目：
bash
npx react-native init MyNewProject
这里MyNewProject是项目名称，你可以根据需要自定义项目名称。此命令将创建一个新的项目目录，并自动安装所有必要的依赖项。完成后，你可以进入项目目录：
bash
cd MyNewProject
4. 运行应用在模拟器上（iOS/Android）
对于iOS：
确保你已安装Xcode并配置了iOS模拟器。在项目目录中运行：
bash
npx react-native run-ios --simulator="iPhone 11" // 使用指定的模拟器运行应用，例如"iPhone 11"
此命令将启动iOS模拟器并运行你的应用。如果你没有指定模拟器型号，它将默认选择可用的一个。
对于Android：
确保已安装Android Studio并配置了Android模拟器。在项目目录中运行：
bash
npx react-native run-android // 在默认的Android模拟器上运行应用
这将启动Android模拟器并运行你的应用。如果你有多个设备或模拟器连接，可能需要指定一个特定的设备来运行应用。
5. 真机部署（iOS/Android）
对于真机部署，你需要按照以下步骤操作：
iOS:
- 在Xcode中打开你的项目（
.xcodeproj文件）。 - 使用Xcode的“Product”菜单中的“Run”按钮来部署应用到你的iOS设备上，或者通过“Archive”功能导出IPA文件。
Android:
- 在终端中运行
adb devices以确认你的Android设备已连接并显示在列表中。 - 使用
react-native run-android --device <device_id>来直接在设备上运行应用，其中<device_id>是adb devices命令输出的设备ID。或者通过USB调试将应用直接安装到设备上。 - 如果需要，可以通过Android Studio的“Build”菜单导出APK或AAB文件以供进一步分发。
