React Native 入门(一) - Windows 平台环境配置
当前 RN 版本:0.48
操作环境:Windows 10
前言
目前就业形势严峻,公司也没什么活,就安排我们自己学习点东西。受到身边同事的影响,我选择了学习 React Native。由于之前没有前端的知识,不会 H5、js,更别说 什么 es6 和 react 了,所以刚接触的时候还是有些困难的。边看视频边看文档,学了大概两个礼拜,倒是也入了一点门。和原生 Android 类似,入门并没有想象的那么困难,不过要想要达到熟练或者精通水品,还是需要付出很大努力的。
索性就把自己的学习历程记录下来做个笔记,也能给其他人一些参考,希望我不会烂尾吧。由于我本身是一位 Android 开发者,并且只有 Windows 电脑,所以目前只打算学习 RN 关于 Android 的知识点,以后的博文也只是针对 Android 开发的。
为什么要学习 RN ?你能百度出它的一大堆优点。但是根据我目前的感受来说,它的用户体验上还是和原生有很大差距的(仅以 Android 平台为例)。但是开发效率确实是提高了,随着 Facebook 的不断更新,我相信它的体验会越来越好。所以目前的移动开发者,要对自己的职业规划有个清醒的认识,以免被 RN 淘汰掉 …
Node
通过 Node.js 官网 下载安装包安装即可。
安装完 node 后建议设置 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 config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
出现以下提示代表设置成功:
注意: 目前 npm5(写文时版本为 5.3.0)存在安装新库时会删除其他库的问题,导致项目无法正常运行。请尽量使用 yarn 代替 npm 操作。例如用 yarn
代替 npm install
命令,用 yarn add 某第三方库名
代替 npm install --save 某第三方库名
。比如安装 react-navigation
的命令:
npm 命令:
npm install --save react-navigation
yarn 命令:
yarn add react-navigation
强烈建议使用 yarn,不然初始化项目的时候可能会出现很多错误。
Android Studio
React Native 目前需要 Android Studio 2.0 或更高版本, jdk 则需要 1.8 或更高版本。关于如何安装 AS、如何配置 jsk 和 sdk 等我就不说了,下面说一下需要注意的地方。
1、打开 SDK Manager
,在 SDK Platforms
窗口中,选择右下角的 Show Package Details
,然后在Android 6.0 (Marshmallow)
中勾选:
– Google APIs
– Android SDK Platform 23
– Intel x86 Atom System Image
– Intel x86 Atom_64 System Image
– Google APIs Intel x86 Atom_64 System Image
2、在 SDK Tools
窗口中,选择右下角的 Show Package Details
,然后在 Android SDK Build-Tools
中勾选 23.0.1
(这个版本必须要有,其他已安装版本没有必要删除)。然后还要勾选最底部的 Android Support Repository
。
3、配置(新建) ANDROID_HOME
环境变量,确保其正确地指向了你安装的 Android SDK 的路径。
右键点击 我的电脑
– 属性
– 高级系统设置
– 环境变量
,在系统变量下新建:
注意: 你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效(无效就重启电脑)。
WebStorm
强烈推荐 Android 开发者利用 WebStorm 进行 RN 的开发,无需磨合,安装即用。不过由于 WebStorm 是收费的软件,我们首次运行时选择 License server
,输入 http://idea.imsxm.com/
进行**(有条件的建议支持正版)。
这里推荐两个插件:
– ReactNative-LiveTemplate:RN 代码自动提示补全;
– Markdown Navigator:方便编辑 md 文件(在 WebStorm 中搜索下载)。
Genymotion(推荐)
这里值得注意的是,我的两台 Win10 电脑都无法启动 Genymotion,百度了很多方法都没有效果。在我快要放弃这款模拟器的时候,偶然间找到了解决办法。
在主板 Bios 中开启 CPU 虚拟化支持,Intel 的叫做 VT(Virtualization Technology)
,AMD 的叫做 SVM
,一般主板是禁用的,开启之后果然能启动了,给大家一个参考。
Git for Windows(推荐)
直接下载 Git for Windows 安装。
在安装过程中注意勾选 Use Git from the Windows Command Prompt
,这样才会把 git
命令添加到 PATH
环境变量中。
其他
其他可选安装建议参考 官方文档 自行选择配置。
大功告成(配置环境真的恶心)!下一篇文章将从 Hello World 开始,一步步学习 RN 相关知识。
文章已同步至简书:http://www.jianshu.com/p/49c4e0dc04bf
以上是 React Native 入门(一) - Windows 平台环境配置 的全部内容, 来源链接: utcz.com/z/381309.html