React Native之序言

转载请注明出处：http://blog.csdn.net/woshizisezise/article/details/51018447

大家好，由于本人最近正在从事用React Native开发原生APP的工作，从刚开始入门的小白，到现在的慢慢熟悉React的工作原理以及使用方法，所以决定将这一阶段的工作记录下来，和大家一起学习这门新技术，因为我觉得React Native技术可能在不久的将来，也许啊，会慢慢的替代掉Android和ios原生开发，作为序言，我们首先来了解一下什么是React Native，在以后的博文中，我将陆续以自身实例的方式为大家演示及讲解React Native的原理与使用。

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

通俗点讲，官网介绍的意思是：

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)

Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

所以说，如果还坚持在Android和ios的原生阵营中，也许在不久的将来，我们将面临一个新问题，那就是前端人员可以很快的投入到移动端app的开发当中（JavaScript），所以我们必须跟上新技术的步伐，这样才能稳中求进，不被技术所淘汰。

其实我接触到React Native并不晚，但是真正用它来开发APP确是在我换了一家新公司的时候，要求我学习它并且试着开始用它来开发原生的APP，刚开始我是懵逼的，不熟悉啊，怎么下手呢，没办法，只好硬着头皮学啊，从React Native官网开始看，官网全英文介绍，虽然本人的英语水平还可以，但是想了想如果有中文版岂不是更好，果然国内有一个翻译过来的React Native中文网，整体来说效果还不错，能保持和官网的90%一致，只是有的Component组件下面把官网上原有的实例给干掉了，不过也没什么，可以去官网自行查看。

在使用了一段时间的React Native后，从刚开始的有点不适应，到现在觉得它没什么不好，挺棒的，只是有的原生控件支持的还不是很好，所以做出来的界面不一定那么的符合项目的要求，不过我相信这一点在以后的时间里肯定会改善的，因为Facebook大力投入资源在这项技术上，并且国内的例如天猫，知乎，淘宝，豆瓣都已经有了React Native+原生嵌套的实现了，所以从长远的角度来看，这项技术也许就像当年的Android一样，慢慢就崛起了，所以我觉得技术得从娃娃时代开始学习，这时候你跟随着技术的发展，自己也在发展中，这一定是一件好事。

刚开始我也遇到很多的坑，因为用的mac电脑，不是很熟悉操作，加上根据官网上提供的操作步骤，还是出错了，后来在过来人的帮助下终于安装好了开发环境，然后就是新建项目，开始体验React Native的编程之旅。

环境需求：

1. OS X - 本向导假设您的操作系统是OS X，因为这是开发iOS应用所必须的。
2. 推荐使用Homebrew 来安装Watchman和Flow
3. 安装Node.js 4.0或更高版本(译注：如果你并不使用Node.js开发网站，只是用于React
   Native的开发，那么请先安装homebrew，然后直接使用brew install
   node安装即可，不必按照下面的nvm的安装步骤)
4. 安装 nvm（安装向导在这里）。然后运行nvm install node && nvm alias default
   node，这将会默认安装最新版本的Node.js并且设置好命令行的环境变量，这样你可以输入node命令来启动Node.js环境。nvm使你可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。
5. 如果你从未接触过npm，推荐阅读npm的文档 在命令行中输入brew install
   watchman，我们推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。
   如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install
   flow来安装flow。（译注：新手可以跳过这一步）

Android开发环境准备

要使React Native应用支持Android，首先需要安装Android SDK (如果你不想连接安卓设备，那么还需要一个安卓模拟器)。参见 Android开发指南 了解如何搭建安卓开发环境。

注： 现在Windows和Linux也在实验性的支持Android开发。

译注： Windows用户可以参考这个帖子来搭建环境。

$ npm install -g react-native-cli

$ react-native init AwesomeProject

译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。

• $ cd AwesomeProject
• $ react-native run-android
• 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
• 按Menu键（通常是F2，在Genymotion模拟器中是⌘+M）然后选择 Reload JS 就可以看到你的最新修改。
• 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

关于如何配置安卓环境，请参考这里安卓环境配置

好了，关于React Native就简单的做一个了解了，具体的知识我会在以后的博文中一步步的带大家了解，由于我在开发中也是一步一个坑（因为没人带我，都是自己摸索着前进），所以有些错误认识很深刻，基本在看到的情况下就知道如何解决了，还有，编程这个东西真的是熟能生巧，大家一起动起来吧，做一个走在技术前沿的工程师。

文末，列出一些本人在Github上看到的不错的网址，供大家学习使用。欢迎大家订阅公众号，我会不定期更新资源，供大家一起学习。

Android端10个最常见采坑问题

React-Native Android 初次踩坑之旅

React-native Android 在Jenkins上配置自动打包方案

Windows下搭建React Native开发环境

React Native For Android の 修改React Native为本地依赖

Android React Native使用原生模块

ECMAScript 6入门