React Native入门到怀疑人生（二）

发表于 | 分类于 | 本文总阅读量 次

欢迎收听React Native系列，基于Window10,偏向于Android端的React Native。上一章React Native入门到怀疑人生（一）我们已经成功将RN配置环境搭建完成，本章节将讲解如何下载并运行FB提供的官方Demo，React.js学习，ES6语法相关学习，以及开发RN的编辑器推荐。请各位系好安全带，本章节过后我们将真正开始RN的开发。嘀！老年卡。文章不当之处，希望大家及时指出，多谢！

官方Demo的下载和运行

1 下载RN源码

若已经安装过项目源码（只要你配置过RN环境基本上都已经克隆过源码，这里只是演示克隆步骤）可跳过此步骤，直接进入项目根目录输入npm install在当前文件夹安装项目依赖，然后跳过此步骤

选择需要安装的目录，新建文件夹，进入文件夹，点击右键在弹出界面中点击Git Bash Hell打开Git命令行，输入git clone https://github.com/facebook/react-native.git，等待下载。

,

安装完成后，界面目录如图。

.

接着，在命令行中输入cd react-native && npm install。等待安装项目依赖。

2 运行Android Example

Note that you’ll need the Android NDK installed, see prerequisites.

如上所述，在运行Android项目之前，你需要安装Android NDK,并且配置NDK环境变量。

Make sure you have the following installed:

  • Android SDK version 23 (compileSdkVersion in build.gradle)
  • SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  • Android Support Repository >= 17 (for Android Support Library)
  • Android NDK (download links and installation instructions below)

其实上述我们需要关注的只是Android NDK，RNDemo依赖的版本为Android NDK, Revision 10e (May 2015).点击下载相应的NDK版本。（不需要翻墙~.~!）.

配图只是想表达下我的网速😁


下载完成之后，选择需要解压的目录，我这边放在sdk目录下如图，当前你可以随意

解压之后，记得要将NDK添加到环境变量中,如：（ANDROID_NDK => D:\sdk\android-ndk-r10e; Path => %ADNROID_NDK%）

修改环境变量后，请重新打开命令行，才能生效

至此配置基本完成，下面打开你的饭碗。。。你，就是说你的，是让你打开你的android模拟器（或者真机），你拿个吃饭的碗干嘛！

在项目根目录（E:\RNDemo\react-native）打开git，输入./gradlew :Examples:UIExplorer:android:app:installDebug，等待安装。（需要翻下墙，翻墙姿势请参考上一章React Native入门到怀疑人生（一））安装完成后你会发现在手机上UIExplore App已成功安装如图。

但是这个时候如果点击app打开会报错如图

这个时候我们需要输入./packager/packager.sh，启动packger server,然后在真机或模拟器上打开我们的应用。成功启动界面如图

Demo中展示有RN的基本组件可以点击浏览。可以点击查看，当然可以在源码中找到相应的控件学习下，这就是接下来的系列教程将会讲解的相关控件。

RN编辑器推荐

Nuclide是Facebook内部所使用的React Native开发工具。它最大的特点是自带调试功能，并且非常好地支持flow语法规则。（译注：然而我们还是推荐webstorm或是sublime text）。

Ignite是一套整合了Redux以及一些常见UI组件的脚手架。它带有一个命令行可以生成app、组件或是容器。如果你喜欢它的选择搭配，那么不妨一试。

CodePush是由微软提供的热更新服务。热更新可以使你绕过AppStore的审核机制，直接修改已经上架的应用。对于国内用户，我们也推荐由本网站提供的Pushy热更新服务，相比CodePush来说，提供了全中文的文档和技术支持，服务器部署在国内速度更快，还提供了全自动的差量更新方式，大幅节约更新流量，欢迎朋友们试用和反馈意见！

Exponent是一套开发环境，还带有一个已上架的空应用容器。这样你可以在没有原生开发平台（Xcode或是Android Studio）的情况下直接编写React Native应用（当然这样你只能写js部分代码而没法写原生代码）。

Deco是一个专为React Native设计的集成开发环境。它可以自动创建新项目、搜索开源组件并插入到项目中。你还可以实时地可视化地调整应用的界面。不过目前还只支持mac。

由于win10系统所以这里选择的开发工具为webstorm。

webstorm开发工具编辑RN代码提示功能可按照下列步骤

  • 1 进入你想存储这个文件的目录，按住shift+鼠标右键，选择“在此处打开命令窗口”

  • 2 在命令窗口中输入 git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate

  • 3 打开webstorm， 选择file–>Import Settings…–>在刚刚下载的文件夹里找到ReactNative.jar选择它–>OK

  • 4 提示重启webstrom，重启，搞定

RN使用ES6语法，所以我们可以开启webstorm对ES6语法的支持，步骤如下

  • 1 我们一定要下载最新版本的11.0.3 webstorm，只有这个版本才能更好的兼容ES6特性。

  • 2 设置JavaScript语言版本：Preferences > Languages & Frameworks > JavaScript

Rect.js学习

推荐阮一峰老师的react.js快速入门教程。Rect.js不再展开讲解，后面课程会穿插讲解部分

ES6语法

同样的，推荐阮一峰老师的ES6教程。ES6不再展开讲解，后面课程会穿插讲解部分

其他资料

感谢github👍，顺便给大家看一场撕逼大战😎

##参考资料