Windows下React Native开发环境的搭建

2,467 阅读4分钟

React、React.js、React Native三者的联系

  • React 是基础框架,提供了一套基础设计实现理念。
  • React.js 是在 React 理念的指导下产生的专门用来开发网页的 web 前端框架。与 React 同时出现和发展,React 的相关概念都在 React.js 文档中。
  • React Native 是用来开发移动端 app 的。只不过是用了 React.js 那套模式,而底层是对 Native Code 的封装及调用。

Chocolatey

Chocolatey是一个Windows上的包管理器,类似于Ubuntu上的apt,centos上的yum,可以用命令行来安装应用程序,以管理员的身份运行cmd。输入以下的语句:

powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

nodejs

打开cmd,使用Chocolatey来安装nodejs,输入以下代码:

choco install nodejs.install

nodejs也可以直接去对应的官网下载。安装完nodejs后设置淘宝镜像,加速npm下载包的速度。npm是nodejs提供的包管理器。

yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。打开cmd输入下面的代码安装yarn:

npm install -g yarn react-native-cli

安装完yarn后同样也要设置淘宝镜像源,npm和yarn的官方网站都在国外,在国内用npm和yarn下载第三方依赖包的速度很慢,这个时候就要用到国内的镜像网站了,这会让你npm、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 install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名。

Android Studio

Android Studio是一个为Android平台开发程序的集成开发环境,就是一个IDE,Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。 或是使用包管理器来安装(比如choco install jdk8或是 apt-get install default-jdk) 你们也可以选择用其他IDE和编辑器,例如VS code、sublime和Atom。参考下面链接。 Atom、Sublime Text、VSCode 三者比较,各有哪些优势和弱势?

AndroidSDK的安装和配置

Android Studio里面带有Android SDK可以不用下载了。使用其他IDE的话就要下载AndroidSDK了。 AndroidSDK可以到官网下载,不过下载速度比较慢。下面给一个我师兄给我的SDK包。
链接:pan.baidu.com/s/1kXZaadoM… 密码:idof
按照上面这个链接下载SDK是已经安装后的包,直接解压到想存放的目录就好了。
接下来还要配置tools和platfirm-tools的环境变量。打开高级系统设置中的环境设置。 在系统变量里面新建一个ANDROID_HOME变量,在变量值里面输入AndroidSDK的安装路径。

编辑系统变量里面的PATH,最后面加上下面的路径。

;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

接着在cmd输入android -h验证环境变量是否配置成功。

在AndroidSDK安装目录下找到SDK manager.exe点击打开。 勾选图片上红框的内容,点击install package..安装。速度会慢一点。耐心等待就好了。

Git

你可以使用Chocolatey来安装git:

choco install git

另外你也可以直接去下载Git for Windows。 在安装过程中注意勾选"Run Git from Windows Command Prompt",这样才会把git命令添加到PATH环境变量中。
{摘自React Native - 入门介绍}

Genymotion

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好,适合开发者的一个安卓模拟器。安装教程在我的上一篇文章里面有详细讲解。

打开APP项目

VirtualBox和Genymotion安卓模拟器, 接着打开cmd进入你的APP项目的目录,输入 react-native run-android运行项目。

看到命令行光标闪烁的话不用急,等他加载完。没有报error的话都是没问题的。 过程中还会弹出nodejs加载app的页面。
看到successful就说明运行成功了。你可以在你的安卓模拟器上面看到你运行的程序。

本文参考链接: