【React Native开发】React Native For Android环境配置以及第一个实例(1)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50456967

本文出自:【江清清的博客】

(一)前言       

       【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新。请大家关注收藏:http://www.lcode.org

         FaceBook早期开源公布了React Native For IOS,最终在2015年9月15日也公布了ReactNative for Android,尽管Android版本号的项目公布比較迟，可是也没有阻挡了广大开发人员的热情。能够这样讲在2015年移动平台市场上有两个方向技术研究比較火，第一种为阿里。百度，腾讯，携程。360等一线互联网公司的插件化，热改动等技术。另外一种就是广大开发人员一直在讨论的React Native技术。前几天同我在美国的童鞋了解到，在国外如今非常多创业型互联网公司都在使用React Native技术。由此能够看出该项技术的前景还是不错的。我在这边我自己就大胆预測一下吧(呵呵,勿喷哦~)：2016年将是React Native大力发展的一年。

所以对于我自己来而言。2016年的主要技术方向,ReactNative是占了主角了。在接下来的非常长一段时间内，我的博客会持续更新React Native的应用开发教程，欢迎大家关注以及相关交流！

         刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)。请不要反复加群！

欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)React Native介绍   

         React Native  For Android是伟大的互联网公司Facebook与2015年9月15日公布的。该能够让我们广大开发人员使用JavaScript和React开发我们的应用，该提倡组件化开发，也就是说React Native给我们提供一个个封装好的组件让开发人员来进行使用，甚至我们能够相关嵌套形成新的组件。

使用React Native我们能够维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。

现阶段Web APP的的体验还是无法达到Native APP的体验。所以这边fackbook更加强调的是learn once,write everywhere，应用前端我们使用js和React来开发不同平台的UI，下层核心模块编写复用的业务逻辑代码，提供应用开发效率。

[特别注意]眼下react native在ios上仅支持ios7以上,Android仅支持Android4.1以上。

       React Native项目github地址:https://github.com/facebook/react-native

       React Native项目官网文档:http://facebook.github.io/react-native/docs/getting-started.html

(三)React Native配置安装

        特别声明:facebook官网说当前react native欢迎是须要OS X,只是我也看到了有人通过windows系统配置该环境哈~大家有兴趣能够百度搜索一下。

        3.1.Homebrew安装

         Homebrew是OS X不可获取的套件管理器，我们能够通过它获取而且安装非常多组件,安装方式例如以下:

  ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后通过命令行执行brew -v进行检查brew是否已经成功安装。总体截图例如以下:

  3.2.Node.js安装,我们须要安装Node.js4.0或者更高版本号,这边推荐採用Node管理器nvm来进行安装,nvm项目地址:https://github.com/creationix/nvm

     第一部分:安装nvm，查看项目官网官方推送curl或者wget方式安装或者更新nvm:

     第一种:curl方式:

 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

    另外一种:wget方式:

  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash  

只是在使用这两种方式之前。我们能够採用brew install curl或者brew install wget来确保已经安装curl或者wget。

我这边採用了第一种方式安装，详细安装截图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

这样我们已经安装了nvm，可是最好我们配置一下环境变量到.bash_profile文件里。详细配置例如以下:

最终我们通过命令行执行nvm  --version检查一下nvm是否已经成功安装。

   第二部分:安装Node.js。依据官网文档我们直接命令行执行例如以下命令就可以完毕完毕:

  nvm install node && nvm alias default node

安装截图例如以下:

该会进行安装Node.js最新版本号。而且会给我们打个别名，方便使用。

通过nvm我们能够安装多个版本号的Node.js，而且能够非常轻松的选择不同的版本号进行切换使用。

     【注意】假设如今採用是Node5.0版本号的版本号。官网是推荐安装npm 2，该版本号比npm 3速度更加快。在安装完Node之后，命令行执行npm install  -g npm@2安装就可以。

 第三部分:安装watchmam。该用于监控bug文件，而且能够触发指定的操作。安装方式例如以下:

brew install watchman

安装截图例如以下:

 第四部分:安装flow,flow是一个 JavaScript 的静态类型检查器。建议安装它，以方便找出代码中可能存在的类型错误。官网:http://www.flowtype.org/  详细命令为:brew install flow

安装截图例如以下:

     3.3.原生开发环境安装:

           针对iOS开发，我们仅仅须要安装Xcode7.0或者7.0以后版本号，该能够通过AppStore进行下载安装

           针对Android开发。Android环境配置网上非常多了，我对应看这篇文章的朋友电脑上面基本都有Android开发环境的了~针对安装详细(点击进入參考文章)

     3.4.React Native安装

        如今就是最后一步，也是最激动人心的时刻到了，我们使用命令行执行例如以下命令安装React Native:

npm install -g react-native-cli

安装截图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

         经过以上的四个大步骤我们基本完毕React Native从基本环境的搭建工作。以下我们来进行一个实例演示React Native项目的效果。

(四)React Native第一个应用(AwesomeProject)

         经过以上的四个大步骤我们基本完毕React Native从基本环境的搭建工作，以下我们来进行一个实例演示React Native项目的效果。ReactNative第一个AwesomeProject，就不是HelloWorld啦。

         首先执行例如以下命令,生成一个工程:

react-native init AwesomeProject

执行截图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

文件夹结构例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

      我们细致看上面的文件夹。会发现该该生成android和ios两个平台的原生项目，大家有兴趣能够打开android和ios文件夹看一下。里边就是一个Android  Studio和Xcode创建的项目。当中index.android.js和index.ios.js文件为Android和IOS的空壳应用文件。另外另一个node_modules文件夹。该为Node.js存放和管理npm包得，也包括React Native框架文件。

查看项目部分代码:index.android.js例如以下:

    4.1.执行iOS 应用:

             ①.命令行执行cd AwesomeProject,路径切换到项目主文件夹

             ②.点击ios/AwesomeProkect.xcodeproj进行执行Xocde

             ③.使用编辑器进行打开index.ios.js进行相关改动，然后执行应用就可以。

       4.2.执行Android应用:

            ①.命令行执行cd AwesomeProject,路径切换到项目主文件夹

            ②.命令行执行react-native run-android进行载入执行android 应用。

            ③.同样能够使用编辑器进行打开和改动index.android.js文件，接着通过菜单button选择ReloadJS来进行刷新改动

     执行截图例如以下:

这些步骤。命令执行完之后。那么我们第一个应用也完美执行啦，详细看例如以下效果！

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

(五)已存在React Native项目加入Android版本号

         由于React Native的Android版本号的公布要晚于iOS版本号，所以有非常多接触React Native比較早的应用可能仅仅有iOS版本号，我们能够进行例如以下的操作，给加入Android版本号:

         ①.改动package.json文件来更新react-native到最新版本号

         ②.执行npm install命令

         ③.最后执行以下react-native android命令就可以

(六)最后总结

         今天我们从初始開始，安装各种工具以及命令，完毕了React Native的基础环境的搭建。而且成功执行第一个React Native for Android的应用。下一篇我们对推荐IDE(Atom)以及相关插件的安装配置解说。

敬请期待~

         

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注。第一时间推送精彩文章)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" style="border:none;" />

关注我的微博，能够获得很多其它精彩内容