ReactNative开发环境搭建过程及遇到的问题

必须的软件:
Chocolatey windows用来管理安装包的(下载,配置,卸载)
这里是用来下载开发需要的环境工具的。
注意:安装Chocolatey需要PowerShell,如果没有需要下载和配置环境变量。

在安装有PowerShell的windows系统,cmd中执行以下命令即可安装:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

出现如上界面表示安装完成,验证完成在命令行中,输入choco如果出现版本号即表示安装完成。

注意:可能下面这些文件使用choco下载失败,解决方案可以直接到官网下载msi文件安装即可。

Python2
安装命令: choco install python2

NodeJS
安装命令: choco install nodejs. install
(Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统。)

<
npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
淘宝 npm 地址:  http://npm.taobao.org/
如何使用 
有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例:
1.临时使用
npm --registry https://registry.npm.taobao.org install express
2.持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功 
npm config get registry
或 
npm info express
3.通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 
cnpm install express

>
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 --globalyarn 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操作。

AndroidStudio
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

**除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了  Android Support Repository ,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)**


推荐安装:
genymotion安卓模拟器

这个模拟器需要VirturalBox支持。
异常:在安装时出现VirtualBox 启动时出现获取 com 对象失败,程序中断。
解决办法:在注册表里面进行修改
HKEY_CLASSES_ROOT\CLSID\{00020420-0000-0000-C000-000000000046}
InprocServer32 修改为C:\Windows\system32\oleaut32.dll
HKEY_CLASSES_ROOT\CLSID\{00020424-0000-0000-C000-000000000046}
InprocServer32 修改为C:\Windows\system32\oleaut32.dll

最后构建第一个App
使用npm安装create-react-native-app,命令:
npm install -g create-react-native-app。
使用下面的代码创建一个新的ReactNative工程并调用工程 AwesomeProject:
create-react-native-app AwesomeProjectcd AwesomeProjectnpm start
执行上面命令后会开启一个开发服务,并且打印一个QR码(二维码)。

运行ReactNative app:
在IOS和Android设备上安装Expo客户端( https://expo.io/ )并且要和电脑连接在同样的无线网络,使用Expo客户端扫描终端上的二维码就可打开工程。

修改app:
打开App.js,使用文本编辑器编辑某一行,保存后相应的页应该也会重载。

如此,开发环境就此搭好!

你可能感兴趣的:(reactnative,android)