[React-Native]React-Native for A

前言

React-Native是互联网巨头之一的Facebook开发的一套多平台开发解决方案。可以让我们使用JavaScript和React开发移动端应用。倡导组件化开发理念，即在RN中任一个功能或者一个UI模块都可以做为一个组件，我们可以使用其封装好的组件，也可以通过嵌套形成新的组件。RN着重于让开发者提高多平台的开发效率，即Learn once,write everywhere的思想。
React-Native 经过Facebook将近三年的开发演进，在写本文时最新的版本已经演进到0.52版本，在github上已经有0.53的pre release状态。

React-Native的特点

• Learn once，Write everywhere
  • 即只需要学习React-Native一种开发方式，就可以开发多个不同平台的App，而且RN的大多数组件也是可以在不同的平台复用的，可以大大的降低了开发成本。
• JSX和FlexBox布局
  • Facebook 为了代码的可读性和效率，开发出了JSX语法糖，即可以在JavaScript中直接写HTML标签的语法糖。
  • FlexBox可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏幕大小。
• 接近原生应用的性能和体验
  React-Native的机制和PhoneGap和Ionic等机制完全不同，React-Native底层仍是使用原生平台开发的，所以应用的整体体验大大的高于Hybrid App。

React-Native for Android

最初的React-Native只支持iOS开发，直到2015年9月开始，React-Native同时开始支持Android开发。到现在RN已经支持大部分的安卓组件，并且在Android平台已经很成熟了。

• React-Native for Android 开发环境搭建
  主要讲解一下在Mac下的环境配置。
  • HomeBrew安装
    Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
    运行命令：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    如果遇到EACCES: permission denied问题，运行命令：sudo chown -R 此处填PC用户名 /usr/local
    查看用户名命令：whoami
  • Node.js安装
    建议去Node.js的官网下载LTS版本。有些文章可能会推荐通过HomeBrew安装。但是这样的缺点是brew下载的是latest version。为了稳定性考虑还是建议使用LTS版本。当然也可以安装HomeBrew，再安装homebrew-version，指定版本下载。下载安装完成后运行node -v查看一下是否安装成功。
  • yarn
    Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。
    运行命令：npm install -g yarn react-native-cli 安装yarn以及react-native cli工具
    如果遇到EACCES: permission denied问题，运行命令：sudo chown -R 此处填PC用户名 /usr/local
  • JDK安装
    去Oracle官网下载jdk工具，按照提示安装。安装完成后运行 javac和java --version查看是否安装成功。
  • AndroidStudio安装
    去Android Developer官网下载AS最新版。需要通过科学上网工具。如果没有科学上网工具，可以去Android dev tool 下载。
    下载完成后，需要进行ANDROID_HOME配置。如果你使用的是Mac原生的terminal，运行vi ~/.bash_profile 打开bash配置文件，在英文输入法环境下按i进入编辑模式，输入export ANDROID_HOME=~/Library/Android/sdk和export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools，将Android sdk和adb工具配置入环境变量。按esc退出编辑模式，再输入:wq进行保存退出。然后通过source ~/.bash_profile使配置生效。如果使使用别的终端工具比如zsh，则要在~/.zshrc下进行编辑。具体不同的终端可自行查询资料。
  • 安装WatchMan
    Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。虽然此工具官方说是推荐安装，但是我还是推荐必须安装。
  • React Developer Tools
    在开发中我们需要在Google Chrome中远程调试React-Native JS代码，在Google Chrome浏览器的应用商店中搜索React Developer Tools并安装。此处应使用科学上网工具。

安装第一个项目

通过以下命令安装第一个Demo项目：
react-native init Demo
cd Demo
react-native run-android
当然也可以通过--version命令指定React-Native版本号：
react-native init Demo --version 0.39.2
注意必须精确到小数点后两位。

修改项目

打开App.js并随便改上几行,按两下R键打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到应用的日志。

至此React-Native for Android 环境配置搭建完成，下一期我们将讲解一下React-Native项目的开发IDE工具。