React Native学习笔记（一）——配置开发环境

Z时代
2024-01-10
分类：综合

react

前言

来到新公司，要求除了会Android外，最好也能会RN。刚来公司的时候，我问一个跟我同时期来的同事问他是做那方面的，他说他做RN。RN？我顿时一脸懵逼，RN是什么鬼？他跟我简单介绍了一下，RN是近几年才流行起来的移动端APP开发技术，因为是基于JS文件的开发，因此它不仅适用Android平台，IOS平台同样适用。也就是说，一套RN代码，可以在Android和iOS两个操作系统运行使用，它的优势不言而喻。当然，相比纯Java的Android开发，这仅仅是它的优势之一。

好吧，既然它这么厉害，我们当然不能放过它，说来惭愧，作为一个移动端应用开发者，我竟然现在才知道它的存在。来了新公司一个多月，除了完成项目需求外，顺便把这将近一个月的RN学习梳理一下作为笔记记录下来，当然最有效的学习方法还是去React Native中文网或者FaceBook的ReactNative官网。

首先当然是配置开发环境，这里也顺便记录下我当时遇到的一些安装问题及解决方案。

先声明下，我的开发环境是安装在Window10上并且主要在WebStorm上开发（暂时没在Android Studio上尝试过），简要说下安装顺序：

下载安装node.js：方便起见，某些步骤我没有真正按照官网的来（其实也来过一遍，各种错误，我都不想在提，心累）。
node.js是基于JS的轻量级的Web服务器，React Native跑起来需要安装node
node.js下载地址
这时我们可能会遇到下面这个问题：
2503安装错误

这是windows8以后的版本安装msi软件（比如nodejs.msi、Git.msi、python.msi、T ortoiseSVN.msi）的时候出现2503、2502的错误，究其原因还是系统权限的问题。一般我们如果遇到权限问题我们会尝试用“以管理员身份运行”的方式运行，但是发现，单击右键后并没有这个选项。
解决方案：
1.打开任务管理器—>选择“详细信息”—>找到“explorer”—>结束任务

2.同样在任务管理器，点击文件—>选择“运行新任务”—>输入“explorer”，这是注意勾选上“以系统管理员权限创建此任务”—>“确定”

3.再次双击nodejs安装文件安装就可以啦。

安装好node.js后，接下来就可以用npm命令来安装RN开发的相关工具了。

npm： The package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.
npm是JavaScript的软件包管理器以及是全球最大的软件注册管理器。可以发现重用代码的包装 - 并以强大的新方式进行组装。
Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.
使用npm来安装，共享和分发代码; 管理项目中的依赖关系; 并与他人分享并收到反馈。
（translate from 谷歌翻译）

打开cmd终端（最好以管理员身份打开），接下来跟中文网里安装一样，下面直接引用中文网上内容：

安装完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
如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）： sudo npm install -g yarn react-native-cli.
安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install –save 某第三方库名。
注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。