环境变量配置

Mac 系统环境搭建第三步

在配置了 iOS 模拟器和 Android 模拟器之后，我们需要安装 Expo CLI 和 React Native CLI，并确保所有环境变量都正确配置，以便顺利创建和运行 React Native 项目。

1. 安装 Expo CLI

Expo CLI 是 Expo 官方提供的命令行工具，用于创建和管理 Expo 项目。

安装步骤

1. 打开终端

2. 安装 Expo CLI

   • 运行以下命令：

     npm install -g expo-cli

   • 等待安装完成

3. 验证安装

   • 运行以下命令：

     expo --version

   • 看到版本号输出，表示安装成功

2. 安装 React Native CLI

React Native CLI 是 React Native 官方提供的命令行工具，用于创建和管理纯原生 React Native 项目。

安装步骤

1. 打开终端

2. 安装 React Native CLI

   • 运行以下命令：

     npm install -g react-native-cli

   • 等待安装完成

3. 验证安装

   • 运行以下命令：

     react-native --version

   • 看到版本号输出，表示安装成功

3. 配置环境变量

检查现有环境变量

1. 打开终端

2. 查看当前环境变量

   • 运行以下命令：

     echo $ANDROID_HOME
     echo $PATH

   • 确保 ANDROID_HOME 已经正确设置，并且 PATH 中包含了 Android SDK 的相关路径

完善环境变量配置

1. 打开配置文件

   • 运行以下命令打开 bash 配置文件：

     nano ~/.bash_profile

   • 或者如果使用 zsh：

     nano ~/.zshrc

2. 添加或修改环境变量

   • 确保文件中包含以下内容：

     # Node.js
     export NODE_PATH="$NODE_PATH:/usr/local/lib/node_modules"
     
     # Android SDK
     export ANDROID_HOME=$HOME/Library/Android/sdk
     export PATH=$PATH:$ANDROID_HOME/platform-tools
     export PATH=$PATH:$ANDROID_HOME/tools
     export PATH=$PATH:$ANDROID_HOME/tools/bin
     
     # Watchman
     export PATH=$PATH:/usr/local/bin

3. 保存并退出

   • 按 Ctrl + X，然后按 Y，最后按 Enter

4. 使配置生效

   • 运行以下命令：

     source ~/.bash_profile

   • 或者如果使用 zsh：

     source ~/.zshrc

4. 验证环境配置

检查所有依赖

1. 打开终端

2. 运行验证命令

   • 运行以下命令检查所有必要的依赖：

     # 检查 Node.js
     node -v
     npm -v
     
     # 检查 Watchman
     watchman --version
     
     # 检查 Xcode
     xcodebuild -version
     
     # 检查 Android SDK
     adb version
     
     # 检查 Expo CLI
     expo --version
     
     # 检查 React Native CLI
     react-native --version

   • 确保所有命令都能正常运行并显示版本号

5. 常见问题解决

环境变量问题

• 问题：环境变量配置后不生效 解决：确保使用了正确的配置文件（.bash_profile 或 .zshrc），并运行 source 命令使配置生效

• 问题：adb 命令无法识别 解决：检查 ANDROID_HOME 环境变量是否正确设置，确保 Android SDK 已正确安装

安装问题

• 问题：npm 安装依赖失败 解决：配置国内镜像，或使用代理

• 问题：权限错误 解决：使用 sudo 命令安装，或修改 npm 全局安装目录的权限

6. 总结

环境变量配置是 React Native 开发的重要步骤。确保所有环境变量都正确设置后，我们就可以顺利创建和运行 React Native 项目了。

下一节，我们将介绍如何创建和运行第一个 React Native 项目，实现 Hello World 应用。