React Native在window下的环境搭建(一)

时间:2021-10-04 07:29:00

React Native官方开发文档

以下是本人抄录的:

初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件也是使用ES6中的语法定义。

首先是安装的依赖,必须安装:Node、React Native命令行工具、Python2 以及JDK和Android Studio。

开发的编辑可以根据自己喜好来,本人使用的时WebStorm,和Android Studio有点像。

1、Node、React Native命令行工具是开发是需要管理包用到。
2、Python2 安装暂时不知道干什么用,但开发文档中提到,那就安装吧。
3、Android Studio是在编译Android应用所需的工具和环境。

Node, Python2, JDK

建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用*工具)。

注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

//设置 npm 镜像以加速后面的过程(或使用*工具)
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

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 install命令,用yarn add 某第三方库名代替npm install 某第三方库名

JDK环境变量配置

1、新建->变量名”JAVA_HOME”,变量值”C:\Program Files\Java\jdk1.8.0_151”(即JDK的安装路径)
2、编辑->变量名”Path”,在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”
3、新建->变量名“CLASSPATH”,变量值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”

React Native在window下的环境搭建(一)    React Native在window下的环境搭建(一)   React Native在window下的环境搭建(一)

配置这三个有什么作用呢?
JAVA_HOME:
为了方便引用,比如,你JDK安装在C:\Program Files\Java\jdk1.6.0目录里,则设置JAVA_HOME为该目录路径, 那么以后你要使用这个路径的时候, 只需输入%JAVA_HOME%即可, 避免每次引用都输入很长的路径串;
2)归一原则, 当你JDK路径*改变的时候, 你仅需更改JAVA_HOME的变量值即可, 否则,你就要更改任何用绝对路径引用JDK目录的文档, 要是万一你没有改全, 某个程序找不到JDK, 后果是可想而知的—-系统崩溃!
3)第三方软件会引用约定好的JAVA_HOME变量, 不然, 你将不能正常使用该软件, 以后用JAVA久了就会知道, 要是某个软件不能正常使用, 不妨想想是不是这个问题。 CLASSPATH: (要加.;表示当前路径)
作用:这是一个很有趣,当然也比较折磨初学者的问题, 这个变量设置的目的是为了程序能找到相应的”.class”文件, 不妨举个例子: 你编译一个JAVA程序—A.java, 会得到一个A.class的类文件,你在当前目录下执行java A,
将会得到相应的结果(前提是你已经设置CLASSPATH为”.”). 现在, 你把A.class移到别的目录下(例如:”e:\”), 执行java A, 将会有NoClassDefFindError的异常,原因就是找不到.class文件,
现在你把CLASSPATH增加为:”.;e:\”再运行java A, 看看会有什么结果),一切正常, java命令通过CLASSPATH找到了.class文件! Path:
道理很简单, 你想在任何时候都使用%JAVA_HOME%\bin\java 等来执行java命令吗, 当然不会, 于是, 你可以选择把 %JAVA_HOME%\bin添加到PATH路径下, 这样, 我们在任何路径下就可以仅用java来执行命令了.
(当你在命令提示符窗口输入你个代码时,操作系统会在当前目录和PATH变量目录里查找相应的应用程序, 并且执行.)

检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格) 
若如图所示 显示版本信息 则说明安装和配置成功。

React Native在window下的环境搭建(一)

Android 开发环境

安装Android开发环境很麻烦,而且感觉摸不到头脑,不过慢慢摸索会清楚的。

请注意!!!国内用户必须必须必须有稳定的*工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,无法进行开发工作。
某些*工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。总之如果报错中出现有网址,
那么 99% 就是无法正常*。

1. 安装 Android Studio

首先下载和安装 Android Studio,如果大不开,请自行搜索下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

1、Android SDK
2、Android SDK Platform
3、Performance (Intel ® HAXM)
4、Android Virtual Device

然后点击"Next"来安装选中的组件。如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

安装完成后,看到欢迎界面时,就可以进行下面的操作了。

2. 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

React Native在window下的环境搭建(一)

或者使用Ctrl+Alt+S,或者在工具栏中打开SDK Manager设置界面

React Native在window下的环境搭建(一)

React Native在window下的环境搭建(一)

可以根据需要来,安装对应版本的SDK

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项,确保勾选了下面这些组件(重申你必须使用稳定的*工具,否则可能都看不到这个界面):

  • Android SDK Platform 27
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的27.0.3版本。你可以同时安装多个其他版本。

React Native在window下的环境搭建(一)

上面安装SDK的过程可能很慢,我弄了一个下午才弄好。

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),

指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

React Native在window下的环境搭建(一)

SDK 默认是安装在下面的目录: c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。