ReactNative 学习记录（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/x1020915098/article/details/80917309

本文详细介绍如何在Mac操作系统上搭建ReactNative开发环境，并在iOS和Android设备上运行首个React-Native应用程序。包括初始化项目、配置环境、解决常见问题等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative 开发环境的搭建在官网上已经写的很详细了。下面我将尝试分别在 Android 和 iOS 设备上运行我的第一个 React-Native App。

操作系统：MacBook Pro 10.13.5 (黑苹果)

初始化 react-native 项目

cd ~/Desktop
react-native init FirstApp

执行完上面的命令后，react-native 会在桌面创建一个名称 FirstApp 的项目文件夹，内部结构如下图所示：

其中，android 文件夹和 ios 文件夹分别放着 Android 平台和 iOS 平台所需要的项目文件。外部是可被共用的页面文件。我们只需要修改 App.js 就能达到简单的 app 页面修改。我这里修改文字为 “Hello，World！”。
App.js

在 iOS 虚拟设备上运行

如果你安装了 Xcode 的话这将是一件非常容易的事。你只需要输入下面的两行命令即可（运行期间会下载一些必要的组件，速度可能会有点慢，请耐心等待）：

cd ~/Desktop/FirstApp
react-native run-ios

接着，在一段短时间的跑码后程序会弹出一个窗口。但是你可能会遇到和我一样的问题：
xcrun error
这个问题很好解决，只需要指定一下 Xcode 开发工具就可以了。解决方法如下：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

紧接着你就能顺利的打开 iOS 模拟器。并安装上第一个 React-Native App。
ReactNative on iOS

在 Android 设备上运行 React-Native

将 Android 手机连接至电脑的 USB 接口并打开 USB 调试。和前面一样，你只需要执行下面的命令即可，唯一不同的是这里的 run-ios 变成了 run-android。

cd ~/Desktop/FirstApp
react-native run-android

但是你可能会遇到和我同样的问题：
SDK location not found
引起这个错误的原因是找不到你的 SDK。SDK 的安装可以单独安装 SDKTools，也可以通过安装 AndroidStudio 来获得。需要注意的是：如果你选择单独安装 SDKTools 则还需要安装 ADB 连接手机工具。如果你安装了 AndroidStudio，那么你需要在 FirstApp/android 目录中新建一个名为 local.properties 的文件并在文件中填入如下代码即可(‘#’后面是注释，可以不要)：

## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file should *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
sdk.dir=/Users/heoclark/Library/Android/sdk

添加此文件后，我们再次运行之前的 react-native run-android 命令即可。这里需要注意的是，如果你使用的是 android 虚拟设备，那么你需要先启动 android 虚拟机再执行这个命令。

注意：React-Native 目前不能支持 JDK9 及以上版本。所以请安装 JDK8。