搭建反应本地开发环境

  

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/

安装Xcode

从App Store搜索下载。需要苹果Id账号。

安装家酿

打开终端,执行以下命令即可安装。详情请参考家酿官网(http://brew。sh/) .

<强>安装自制程序

#,no  need ×××/usr/bin/ruby  -e “$ (curl  -fsSL  https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成之后,使用“酿造医生“命令检查是否安装成功。根据提示解决对应的问题,消除警告。

安装Android SDK

通过自制程序可以便捷地把Android SDK安装到默认目录“/usr/地方/opt/Android SDK”。请在终端中执行以下命令。

<强>安装Android SDK

#,no  need ×××   brew  install  Android SDK

需要设置环境变量ANDROID_HOME美元,美元的道路。

<强>安装Android SDK

#,在终端中执行以下命令,打开环境变量配置文件   sudo  nano  ~/. bash_profile   ,   #,粘贴如下指令,保存环境变量(需要注销并重新登录mac)   export  ANDROID_HOME=/usr/地方/opt/android sdk   export 路径=$路径:ANDROID_HOME/bin: ANDROID_HOME美元/工具   ,   #,按CTRL + X可保存

更新Android SDK组件(需要挂×××)

在终端中执行“Android SDK”即可打开Android SDK更新管理工具。

如下图安装Android SDK中的组件,注意“Android SDK构建工具”的版本要求是23.0.1,使用Genymotion的情况下,可以不安装“英特尔x86 Atom_64系统映像”和“英特尔x86原子系统映像”。

搭建反应本地开发环境”> <br/> <h3>安装流和守望</h3> <p>请在终端中执行以下两条命令。</p> <p> <强>安装流</强> </p> <pre类=八?bash;地沟:真的,”> #,no  need ×××
  brew  install 流
  brew  install 守望</pre> <p> </p> <h3>安装nodejs </h3> <p>从nodejs官网(https://nodejs.org/en/)下载安装最新版的nodejs(当前版本是:v4.3.1)。</p> <h3>安装react-native-cli </h3> <p>通过nodejs可以便捷地安装“react-native-cli”。请在终端中执行以下命令(注意使用“sudo”和“g”选项)。</p> <p> <强>安装react-native-cli </强> </p> <pre类=八?bash;地沟:真的,”> #,no  need ×××
  sudo  npm  install  -g  react-native-cli </pre> <p> </p> <h3>安装Genymotion </h3> <p>首先安装VirtualBox,从百度搜索即可。</p> <p>与Android SDK自带的模拟器相比,Genymotion更为流畅,推荐安装使用。需要去官方网站(https://www.genymotion.com/)注册个人用户账号。</p> <p> VirtualBox5.0.14与Genymotion2.6.0安装包在移动硬盘上有。</p> <h3>安装Webstorm 10 </h3> <p> Webstorm可以很好的支持JSX语法,并能格式化代码文件,适合开发反应本地项目。从Webstorm官网(https://confluence.jetbrains.com/display/WI/Previous + Webstorm +版本)可以下载10.0.4版本。在协作平台中,可以找到注册码。</p> <h3>创建反应本地空项目</h3> <p>建议为本地反应项目创建一个根目录,比如:~/RCTDev,然后在终端中执行如下命令(可能需要几分钟时间):</p> <p> <强>创建第一个项目</强> </p> <pre类=八?bash;地沟:真的,”> #,no  need ×××
  cd  ~/RCTDev
  react-native  init  NCFirstProject </pre> <p> </p> <p>即可创建一个名为“NCFirstProject”的新项目。</p> <h3>使用Webstorm编辑JSX代码文件</h3> <p>使用Webstorm打开目录“~/RCTDev/NCFirstProject”,双击打开index.ios。js文件。等待Webstorm识别JSX代码语法,然后点击开关切换。</p> <p> <img src=

在Webstrom命令行中,输入“npm安装”命令初始化“本地”反应依赖项。

<强>安装依赖react-native

#,no  need ×××   npm 安装

在iOS模拟器中运行

在Webstrom命令行中,输入“react-native run-ios”即可打开iOS模拟器并运行改项目。

快捷键:

<李>

命令+ R修改任何js代码之后,可以通过改快捷键重载应用看效果。

<李>

Ctrl +命令+ Z打开菜单,可以启用自动重载,查看帧率,审查元素等。

在Android模拟器中运行

首先需要在Genymotion中登录账号并且安装一个Android镜像。运行Android镜像后,可以在Webstorm命令窗口中执行“react-native运行Android”。

搭建反应本地开发环境