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!”。
在 iOS 虚拟设备上运行
如果你安装了 Xcode 的话这将是一件非常容易的事。你只需要输入下面的两行命令即可(运行期间会下载一些必要的组件,速度可能会有点慢,请耐心等待):
cd ~/Desktop/FirstApp
react-native run-ios
接着,在一段短时间的跑码后程序会弹出一个窗口。但是你可能会遇到和我一样的问题:
这个问题很好解决,只需要指定一下 Xcode 开发工具就可以了。解决方法如下:
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/
紧接着你就能顺利的打开 iOS 模拟器。并安装上第一个 React-Native App。
在 Android 设备上运行 React-Native
将 Android 手机连接至电脑的 USB 接口并打开 USB 调试。和前面一样,你只需要执行下面的命令即可,唯一不同的是这里的 run-ios
变成了 run-android
。
cd ~/Desktop/FirstApp
react-native run-android
但是你可能会遇到和我同样的问题:
引起这个错误的原因是找不到你的 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。