安装依赖
必须安装的依赖有:Node、Watchman和React Native命令行工具以及Xcode。
Node,Watchman
推荐使用Homebrew来安装Node和Watchman。在命令行中输入以下命令行来安装。
brew install node
brew install watchman
如果已经安装了Node,请检查其版本是否在 v10 以上。命令行node -v
即可查询安装版本。安装完Node后建议设置npm镜像以加速后面的过程。
注意:不要使用cnpm! cnpm 安装的模块路径比较奇怪,packager 不能正常识别!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Watchman
则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。
Yarn、React Native 的命令行工具(react-native-cli)
Yarn
是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装完 yarn
之后就可以用 yarn
代替 npm
了,例如用yarn
代替npm instal
l命令,用yarn add
某第三方库名代替npm install
某第三方库名。
Java Development Kit
React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)。你可以在命令行中输入
javac -version
来查看你当前安装的 JDK 版本。如果版本不合要求,则可以到 官网上下载
JDK1.8具体配置步骤链接
Android开发环境
1、安装 Android Studio
首先下载和安装Android Studio,安装界面中选择“Custom”选项,确保选中了以下几项:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
然后点击“Next”来安装选中的组件。
如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。
安装完成后,看到欢迎界面时,就可以进行下面的操作了。
2、安装Android SDK
Android Studio默认会安装最新版本的Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。
在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项,确保勾选了下面这些组件:
- Android SDK Platform 28
- Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本
最后点击"Apply"来下载和安装这些组件。
3、 配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。 - 打开终端,进入当前用户的home目录:cd ~/
- 打开.bash_profile并编辑:open .bash_profile
- 把下面的命令加入到bash_profile文件中:
#如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
以下是我文件的配置图:
- 使用source $HOME/.bash_profile命令来使环境变量设置立即生效(否则重启后才生效)。
- 可以使用echo $ANDROID_HOME检查此变量是否已正确设置。
请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK
创建新项目
使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:
react-native init AwesomeProject
使用Android模拟器
你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样:
如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device...",然后选择所需的设备类型并点击"Next",然后选择Pie API Level 28 image.
译注:请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。
然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了,启动完后我们可以尝试运行应用。
编译并运行 React Native 应用
确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行react-native run-android:
,记住:一定要先运行模拟器哦~
cd AwesomeProject
react-native run-android
如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。
运行过程中遇到的问题
1、java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
这个问题是工程找不到我们的android SDK
解决方法:创建一个Android空工程,在工程目录下找到local.properties文件,复制到RN项目目录下的android文件夹内。
2、What went wrong:
Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: No connected devices!
重点是这句话:No connected devices!
这种问题是因为没有设备运行或者模拟器没开,导致没有链接上网络,真机也要记得开启调试模式。
3、报错:/bin/sh: adb: command not found ,如下图
原因:我的终端命令行是zsh,然而我配置的环境变量是在bash_profile文件里,对zsh不生效,因此,需要编辑下.zshrc配置环境变量,
cd ~/
open .zshrc
#添加相关环境变量配置,将bash_profile文件里内容复制过来就行了
source .zshrc
接下来就可以在zsh命令行中使用了~
最后附加上bash和zsh切换方法:
切换到bash
chsh -s /bin/bash
切换到zsh
chsh -s /bin/zsh
记得输入切换命令后,要重新打开终端terminal才生效哦!
最后附张安卓模拟器运行成功后的截图~