ReactNative-01(环境搭建及工具配置)

前言

个人感觉ReactNative慢慢的将会越来越流行,毕竟可以花一样的时间,甚至更少的时间开发兼容Android和IOS两个平台的应用,但是在这之前,我们需要了解一些前端知识,如JS和ES6等,那么我们就一步一步来学习这个框架是怎么使用的?

配置环境

安装Chocolatey

在箭头处右键以管理员身份运行,然后输入命令

Set-ExecutionPolicy AllSigned

或者命令

Set-ExecutionPolicy AllSigned

然后再cmd命令窗口(以管理员身份运行,以下不在说明)输入以下代码:

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

上面完成以后我们就完成了软件管理器Chocolatey 的安装,它的好处就是可以想linux一个通过命令便捷的安装所需软件.

安装Python 2和Node

继续在命令窗口输入以下内容:

choco install python2
choco install nodejs.install

下面就去添加系统环境变量

如箭头所示:点击新建然后输入:

C:\Users\你的用户名\AppData\Roaming\npm\node_modules\npm\bin

然后再你的输入命令npm,看环境变量是否配置成功.

如果如图所示,说明配置成功,配置成功以后我们就更改镜像源,改为国内的ip,如果你翻墙了,可以忽略.
输入以下代码:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

安装eact-native-cli

代码如下:

npm install -g yarn react-native-cli

它是用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
测试是否安装,cd到你想要创建文件的目录,然后输入:

react-native init 任意的工程名

如果正常运行并生成了一个工程,那么你的环境就配置好了.例如我在E:盘生成了一个HelloWorld,那么我怎么打开他呢?下面就用到了IDE.

AS的安装和环境配置

此处省去一万字,看我博客的基本上都是Android程序员,这个估计都已经配置好了,记得配置D:\AndroidSdk\tools和D:\AndroidSdk\platform-tools两个目录到path就好.

WebStorm的配置

外观配置

为什么要选用它,因为我们开发Android的几乎都是用的AS啊,当然也有少部分人用的是Eclipse,WS(WebStorm简称)和AS的配置文件是可以相互通用的,如何把我们AS常用的字体大小,配色,主题风格移植过来呢?看图

不需要的配置都把它给去掉,然后点击OK就会在指定目录生成一个settings.jar,好了我们现在打开WS,点击File,同AS,只不过是点击Import Settings.选你刚保存Setting,jar.到这里,你的WS和AS风格基本上就同意了,git,svn什么的也不用重新配置了.

项目配置

现在就让我们打开刚才生成的HelloWorld项目吧,点击File->Open,选你刚才的项目目录,然后如下图:

你发现并没有运行的那个三角符号,下面我们就配置:

点击向下的箭头,有相应的提示,选上去.

然后选择你的项目,点击Apply,好了,现在你开一个模拟器或者真机,你就可以运行了.
note WS最好以管理员身份运行.还有就是我们在同时开了两个项目的同时,有可能出现以下错误:
ERROR Packager can’t listen on port 8081
说明有一个项目正在调试,没有关闭.在运行另一个项目的时候,记得点击当前项目的

本人也是刚开始研究RN,有兴趣的小伙伴可以一起学习.