React Native学习笔记一之搭建开发环境

因为项目需要,今天开始正式学习React Native,先来搭建个开发环境

忐忑的心情

因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了,在保证工期的前提下,进击的程序猿, go,go,go!!

React Native学习笔记一之搭建开发环境_第1张图片


环境

应用环境:Android
开发环境:Windows
学习地址:http://reactnative.cn/docs/0.49/getting-started.html

除了在React Native中文网学习RN的开发环境搭建,也可以看看RN 社区里面这篇文章
在Windows下搭建React Native Android开发环境


开始,相关概念

1、PowerShell

PowerShell是微软公司为 Windows 环境所开发的壳程式及脚本语言技术,采用的是命令行界面。

—>百科介绍<—

2、包管理工具

包管理工具,可以让我们用几个简单的命令去安装,升级,还有删除软件,并且它会自动给我们解决软件之间的依赖的问题。
Windows 用户可以使用 Chocolatey 这个包管理工具,Mac 用户可以使用 Homebrew

安装Windows下的包管理工具Chocolatey

安装 Chocolatey

安装 Chocolatey,只需要在 Windows 系统的命令行工具下面去执行一行命令,这个命令行工具可以是 命令提示符(cmd),也可以是 Powershell ,只需要在其中的一个上面安装 Chocolatey 就可以了。你要用管理员的身份去运行命令行工具,不然会遇到权限问题。

以管理员身份打开命令行工具

Windows 7:点击 开始 菜单,在搜索框里输入 cmd 或者 powershell ,找到以后,用鼠标右键点击它们,选择 以管理员身份运行。

Windows 8 + :使用快捷键 win + Q ,搜索 cmd 或者 powershell ,然后右键点击它们,在窗口下面,选择 以管理员身份运行。

在 命令提示符 上安装 Chocolatey

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

在 Powershell 上安装 Chocolatey

iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

提示:如果是在 Powershell 下面安装 Chocolatey 之前,先修改一下 Powershell 的执行策略,不然会出现 “此系统中禁止执行脚本” 这样的错误,解决的方法是执行下面的命令,意思就是把执行的策略设置成不限制:

Set-ExecutionPolicy unrestricted

测试

在命令行工具的下面,输入:

choco -help

如果出现一些有用的帮助信息,比如 Chocolatey 的版本号,安装到的目录,相关的命令,还有示例等等,这就说明我们已经可以在系统上使用 Chocolatey 了。

这里写图片描述

这里写图片描述


3、安装Python 2

打开命令提示符窗口,使用Chocolatey来安装Python 2。输入命令

choco install python2

安装过程
React Native学习笔记一之搭建开发环境_第2张图片

安装成功
React Native学习笔记一之搭建开发环境_第3张图片


4、安装Node

打开命令提示符窗口,使用Chocolatey来安装NodeJS

choco install nodejs.install

安装成功
React Native学习笔记一之搭建开发环境_第4张图片

安装完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

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 –save 某第三方库名。


5、安装android studio

安装AS,其实之前开发的时候肯定是安装过的,这里就不说了,包括环境变量的设置等等,如果作为一个android程序员,自己的开发环境都不会配置的话,你真的——可以百度嘛。
需要提一下的是有可能之前做原生开发的时候,并没有安装或下载RN开发需要的一些工具或库,这个可以看RN中文网看看需要什么,然后在AS中去安装即可,我这边的有:

SDK Platforms

Google APIs Intel x86 Atom System Image

Google APIs Intel x86 Atom_64 System Image

SDK Manager中去勾选上下载即可

React Native学习笔记一之搭建开发环境_第5张图片


6、开启Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

官方文档中的开启的介绍方法是在window的命令行中输入如下命令

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

这个命令的含义就是,在用户目录下,找到.gradel文件,没有就创建一个,在这个文件夹下创建一个文件gradle.properties,在这个文件中添加内容org.gradle.daemon=true


7、关于模拟器的选择

我之前有一般都是使用真机调试的,不过有时候也会想用模拟器(如果模拟器的启动速度和内存占用情况较好的情况下),Genymotion是我之前用过的, 而且效果不错,所以我就继续Genymotion了,至于它的安装使用,这里就不写了,可以参考这篇文章或者自行百度。


8、来测试一波RN的项目

在window命令行中,进入你的工作目录,然后输入如下命令

1创建项目

react-native init RNTest

注意项目RNTest的创建路径,我可不想把项目建在C盘

React Native学习笔记一之搭建开发环境_第6张图片

React Native学习笔记一之搭建开发环境_第7张图片

2运行packager

react-native start

可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)

React Native学习笔记一之搭建开发环境_第8张图片

3**保持packager开启,另外打开一个命令行窗口**,然后进入工程目录,运行项目

cd RNTest
react-native run-android

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

如果安装成功,应该能看到APP红屏报错,这是正常的,我们还需要让app能够正确访问pc端的packager服务。

React Native学习笔记一之搭建开发环境_第9张图片

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

我将电脑的防火墙关闭之后,内容就显示出来了

React Native学习笔记一之搭建开发环境_第10张图片


9、安装时异常处理

在安装过程中,我自己的电脑上是很顺利的,但是在公司的电脑上就出现了问题(可能是公司电脑软件比较老的原因),在安装的python2的过程中提示

[00:01:54] Failures
[00:01:54]  - python2 (exited 1603) - Error while running 'C:\ProgramData\chocolatey\lib\python3\tools\chocolateyInstall.ps1'.
[00:01:54]  See log for details.

其实这是你的电脑已经安装了python2 了,所以安装失败了,检验自己的电脑是不是安装了python2,只需要在命令行输入python即可,如果安装了就会python的命令行,没有就表示还没有安装,通过弹出python命令行我们可以看出python的安装路径,比如:
这里写图片描述


ok,学习笔记一之搭建开发环境就完成了,后面就可以开始写“Hello World”了!!

你可能感兴趣的:(React,Native学习笔记)