React Native学习笔记（一）

2017-05-16 本文已影响50人 DoggieX

【置顶】React Native中文网

*** 本篇只是学习的一个笔记，重在展现实现的过程，并没有太多的理论介绍，之后会着重添加理论篇 ***

Windows下Android环境的搭建

有翻墙工具的情况下，可以采用官网建议的Chocolatey安装Python和Node环境，屌丝请自行安装咯。

安装Python 2

注意不支持Python 3，Python 2下载
安装就是无脑Next(强迫症可以切换安装目录，我就很严重)。
安装完成后，打开到刚刚安装的目录，地址栏复制该目录根目录，环境变量->系统变量->Path，添加到最后，注意分号，配置完成。
测试配置是否成功，cmd：

python

若出现版本号等相关信息则配置成功。

安装Node

暂不支持Node 7.1版本，Node 6.10版本下载
安装略。。。
安装完成后会自动配置到Path路径。
测试一哈：cmd：

node -v

若出现版本号则安装成功。
安装完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）等任务。
Yarn安装：

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

Android Studio

饭碗，不解释了

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

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

测试安装

react-native init TestProject
cd TestProject
react-native run-android

请不要直接打开cmd就执行init操作，先切换到想要放置的工作目录，再执行，是在当前目录下创建项目。等待一段时间创建完成后，cd到项目目录，执行run，确保连接真机或者模拟器。

WebStorm安装

js开发的编辑器，和as同出基于IntelliJ IDEA，习惯了其风格。
WebStorm下载
点击DownLoad就能下载安装了。不过只能免费试用30天，所以需要破解。
打开后，会弹出注册码的窗口，然后选择“license server” 输入：http://idea.imsxm.com/ 即可破解完成。
PS：在线激活有一个过期时间，这个时间一过就必须再次联网授权服务器请求激活。

配置
File->Default Settings：

Default Settings配置

File->Settings：

Setting配置
代码补齐提示
File–>Setting–>Languages & Frameworks–>JavaScript–>Libraries，点击右边的Download按钮，选择TypeScript community stubs，下载react和react-native。然后下载ReactNative.jar，下载之后在WebStorm中点击File–>Import Settings导入重启即可使用。这样WebStorm里面就会有React Native组件名称、组件属性、StyleSheet属性等的一些自动补全。
运行配置
跑项目不需要再用命令行了，类似AS按个小三角就跑起来啦，GO!GO!GO!

Step1

Step2

Step3

Step4

PS：React Native命令所在路径，一般在npm目录下，要选中react-native.cmd而不要选中react-native，否则会报错。

最终成功啦
点击小三角就能运行了，console面板中也会有输出了。

新建React Native工程
可以用上文的方法在终端执行react-native init XXX来创建，也可用WebStorm来创建。
File->New->Project->React Native->Loaction就是创建目录，需要新建一个文件夹，文件夹的名称就是工程的名称，Apply后，Terminal就开始创建了，可以发现和init是相同的过程，只不过更加方便地集成进来了。

运行测试

基本环境就算搭建完成了，那么我们来测试一下吧。
创建的工程是可以直接运行的。打开index.android.js可以看到里面有一些HelloWorld的代码。猜想一下，运行结果应该是手机屏幕上出现几行大小不同的字母。
讲手机连接到电脑，确保usb连接，调试等之后，点击Run小三角，Console开始输出，等待一会就能看到安装成功了。

PS：常见问题汇总

可以看到已经安装到手机上了，打开后发现要求一个悬浮窗的权限，必须打开，若未打开去系统设置中打开该权限。
第一次运行的时候，会出现红屏，一大堆Error，弄了半天，看到这个整个人都不好了，是不是？是不是？别着急，摇晃一下手机，就会出现一个弹窗。选择Dev Settings,跳转到另一个页面。