React Native环境搭建

最近组里老大开始招RN的一些开发人员，也从最近的一些动向代表未来的功能有可能会由RN来编写了，而对于我是从事纯Native的android开发工做已经N多年了，对于RN组里面也有一些同事的技术分享，说实话对它是很是之抗拒的，觉着这玩意不会就像几年前出的PhoneGap那样鸡肋的技术吧，也就是用Webview去加载h5页面嘛，不可能代替Native的，直到最近组里老大的招人动向发现本身才真的是井底之蛙，以为这技术确定是有用的，因而乎花了周末两天时间对其进行了一个初步了解，发现真的彻底出乎自已的预期，确实是特别值得一学的未来可能还能派上用场的一门技术，因此先将这两天的研究成果记录成案，将来会不断去深刻学习它的。
初识React Native:

• 什么是React Native?
  它是fackbook开源的一套用于开发移动端跨平台App的技术框架；其代码托管于GitHub【https://github.com/facebook/react-native】上，目前已有一千多名参与者向它贡献代码，以下：
  

   其中能够看到它的star人数：
  

  是否是能感觉到它的疯狂呢？而现在在用这门技术的公司都有哪些呢？看一下官网贴出来的【固然啦不必定百分百是真实的，但确定绝大部分确实是用了啦】以下：
  

  呃~~貌似就认得facebook，这技术是来自于它固然用过啦，来看看有木有国内的公司列在其中，固然有啦，以下：
  

  怎么样，有必要要学习它么？另外对于这门技术跟我们Android native的性能有没有很大的区别呢，不会就是用WebView来加载的H5吧，这个能够在官方对该技术的开篇介绍就已经有说明了，以下：
  

  因此该技术仍是值得好好去探究滴~

• 为何要用React Native?
  这里从如下两方面来进行阐述：
  ①、 传统开发的痛点：
  　　a、开发成本高：Android和Ios两个得两个独立的团队进行开发。
        b、代码复用率：Android和Ios的代码彻底不能共享代码。
        c、不一样平台实现会有差别：应该在实际中都遇到过Android实现的某个功能跟Ios不太同样，因为平台的关系。
        b、没法动态更新：虽然说Android现在都出现了一些热修复与插件化的技术，可是仍是存在一些兼容性问题。
  ②、React Native的优势：
        a、跨平台：一次编写就能够适用Android和Ios。
        b、低投放高回报：如官网的标语所说：
             
  

        d、性能高：因为它是用JS编写最终会生成各个平台的Native的代码。
        e、支持动态更新：关于它能够在将来的学习中来进行体会。

• 若是用了React Native，会有哪些好处？
        a、一才两用：之前要两我的来分别开发Android和Ios，如今一我的就能够搞定两个平台了。貌似对于我这个只会Android的表示对钱途压力山大。
        b、开发成本低：不用多说。
        c、代码复用率高。
        d、支持动态更新：这个优点就不言而喻了。

MAC上环境搭建同时运行在Android和Ios手机上：

在Mac上开发React Native须要安装如下环境和工具：

• Node.js
• React Native Command Line Tools
• XCode/AndroidStudio

因此下面直接开始安装环境：

安装Node.js:

在Mac上安装Node.js可能经过Homebrew，具体命令以下：

brew install node

不够我用这种方式在个人Mac上木有成功，因此改用了比较Low的办法，直接上官网【https://nodejs.org/en/download/】下载.pkg安装包进行安装的，装了一个稍老的版本，以下：

具体安装步骤就很少说了，安装完以后，能够敲以下命令来验证是否安装好，以下：

安装React Native命令行工具：

直接上命令：

npm install -g react-native-cli

而安装时提示权限不足，以下：

固然是加sudo解决喽，以下：

安装成功以后，仍是执行相应的命令来验证是否安装成功，能够经过以下命令：

 

安装Xcode/AndroidStudio：

Xcode：

它是用来开发IOS的，不过我是搞Android的，不太会，可是不会照样能够经过React Native来运行一个app在ios手机上，具体安装直接在mac上的appstore上进行搜索，以下：

它比较大，我是下了一夜才下完滴。

AndroidStudio：

这个直接略掉，太easy的，由于这是个人本职工做。。

建立第一个React Native应用：

工具都准备好以后，下面能够经过以下命令进行React Native应用的初始化：

react-native init <项目名字>
如：
react-native init FirstApp

那下面来弄一下：

觉得它很顺利，实际上这一步卡了半天，其坎坷过程也稍加记录一下：

因而乎从新安装了8.0的node.js，再次执行初始化，终于成功了，固然啦我这用文字是轻描淡写了，实际解决过程耗费了我大半天。。以下：

也就是当看到上图红框处的提示就代码React Native的项目正常被初始化了，接着看一下生成的项目目录：

 

好，有了工程以后，那如何将它编译运行到Android或Ios手机上呢？下面来实验下：

运行工程至IOS：

根据初始化React Native项目在控制台的提示就能够看出有两种方式来运行，以下：

To run your app on iOS:

   cd /Users/xiongwei/Documents/workspace/reactnativestudy/FirstApp

   react-native run-ios

   - or -

   Open ios/FirstApp.xcodeproj in Xcode

   Hit the Run button

首先用命令来运行，以下：

回车执行：

哟西，iphone的模拟器就出来啦，还挺刺激的，固然还有个东东：

最终安装成功的画面定格在：

好，接着用第二种方式，在xcode中进行安装，以下：

先用xode来打开这个ios工程，对应的就是这个目录存放的东东：

固然经过这个方式运行我也是卡了半天，缘由是因为我以前彻底对ios不懂也没运行过ios项目，因此xcode环境存在一些问题，这里就不把这个坎坷之路记录下来了，总之只要环境OK能正常运行ios项目那应该是挺顺利就能够装上滴，打开以后：

也会弹出这个安装框的：

最后就能够正常的在手机上运行啦，比较简单。

运行工程至Android:

也根据初始化React Native项目在控制台的提示就能够看出有两种方式来运行，以下：

首先先用命令的方式来运行，以下：

因此这里启动一个模拟器，我日常习惯用Genymotion，以下：

再次执行刚才的命令：

这样就正常运行了。接下来采用直接运行Android工程来安装，先找到React Native工程中的Android目录，以下：

而后用Android Studio将其打开进行编译，固然这个编译也须要等待一段时间，编译成功以后就能够直接经过run的方式安装啦，比较简单就很少说了。

下面来论证一个问题：就是以前不是说React Native并非用Webview去加载H5的技术，其实它就是跟我们纯Native开发的形式同样，那何以见得呢？我们以Android平台来例，能够在运行完的界面上进行布局分析，看是否布局中就是我们Native写的那些，下面来实验下：

而我们搜一下"ReactTextView"的代码：