因为项目需要,今天开始正式学习React Native,先来搭建个开发环境
因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了,在保证工期的前提下,进击的程序猿, go,go,go!!
应用环境:Android
开发环境:Windows
学习地址:http://reactnative.cn/docs/0.49/getting-started.html
除了在React Native中文网学习RN的开发环境搭建,也可以看看RN 社区里面这篇文章
在Windows下搭建React Native Android开发环境
PowerShell是微软公司为 Windows 环境所开发的壳程式及脚本语言技术,采用的是命令行界面。
—>百科介绍<—
包管理工具,可以让我们用几个简单的命令去安装,升级,还有删除软件,并且它会自动给我们解决软件之间的依赖的问题。
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 了。
打开命令提示符窗口,使用Chocolatey来安装Python 2。输入命令
choco install python2
打开命令提示符窗口,使用Chocolatey来安装NodeJS
choco install nodejs.install
安装完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 某第三方库名。
安装AS,其实之前开发的时候肯定是安装过的,这里就不说了,包括环境变量的设置等等,如果作为一个android程序员,自己的开发环境都不会配置的话,你真的——可以百度嘛。
需要提一下的是有可能之前做原生开发的时候,并没有安装或下载RN开发需要的一些工具或库,这个可以看RN中文网看看需要什么,然后在AS中去安装即可,我这边的有:
SDK Platforms
Google APIs Intel x86 Atom System Image
Google APIs Intel x86 Atom_64 System Image
在SDK Manager
中去勾选上下载即可
开启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
我之前有一般都是使用真机调试的,不过有时候也会想用模拟器(如果模拟器的启动速度和内存占用情况较好的情况下),Genymotion
是我之前用过的, 而且效果不错,所以我就继续Genymotion
了,至于它的安装使用,这里就不写了,可以参考这篇文章或者自行百度。
在window命令行中,进入你的工作目录,然后输入如下命令
1创建项目
react-native init RNTest
注意项目RNTest的创建路径,我可不想把项目建在C盘
2运行packager
react-native start
可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)
3**保持packager开启,另外打开一个命令行窗口**,然后进入工程目录,运行项目
cd RNTest
react-native run-android
如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。
如果安装成功,应该能看到APP红屏报错,这是正常的,我们还需要让app能够正确访问pc端的packager服务。
摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
我将电脑的防火墙关闭之后,内容就显示出来了
在安装过程中,我自己的电脑上是很顺利的,但是在公司的电脑上就出现了问题(可能是公司电脑软件比较老的原因),在安装的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”了!!