ReactNative入门

目前主流应用程序大体分为三类：Native App, Web App, Hybrid App.

示例（来源网络）.png

三者各有利弊，具体对比差异点击这里

React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios，android，以及后台的一项技术。 FaceBook 也号称这们技术是 “Learn Once，Write AnyWhere”。

React Native的优势：

• 相对Webapp：

不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用

• 相对于Native app：

可以通过更新远端JS，实现热更新。

是不是已经迫不及待运行看看了......
安装

• Chocolatey
  Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。
• Python 2
  打开命令提示符窗口，使用Chocolatey来安装Python 2.

choco install python2

• Node
  打开命令提示符窗口，使用Chocolatey来安装NodeJS.

choco install nodejs.install

• React Native命令行工具（react-native-cli）
  React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务packager等任务。

npm install -g react-native-cli

当然作为一名有素质的Android Coder，JDK 、Android Studio 、Git 、Emulator不能少。

测试安装
启动模拟器，cmd下键入

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

项目目录结构：

项目目录.png

运行命令

image1.png

image2.png

模拟器运行结果：

模拟器运行结果（背景色有修改）.png

有个常见的问题是在你运行react-native run-android命令后，Packger可能不会自动运行。此时你可以手动启动它

cd AwesomeProject
react-native start

修改项目
现在你已经成功运行了项目，我们可以开始尝试动手改一改了：
使用你喜欢的文本编辑器打开index.android.js
并随便改上几行，按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。

完成！

参考链接：
ReactNative中文网
ReactNative官网
ReactNative基础教程