React Native JS环境搭建

前言

       俗话说，工欲善其事必先利其器，在前面的 React Native for Android环境搭建文章中，我们搭建了原生语言的开发环境，发现里面有很多代码都是JS写的，开发模式从以前的单一一种语言或者同一个IDE开发变成了多种语言进行开发了，如果你已经是前端人员了，那你可能对JavaScript很熟悉了，也有很多好的开发工具，但是如果你之前没有开发过，那环境将是很重要的工具，虽然说高手都是文本文档来进行开发，但是我还不行，尤其是代码提示和补全还是很重要的。

JS环境搭建

       前端更新换代很快，前端的开发IDE也有很多，很多没有用过，甚至没有听过，那我们该装什么呐？这里有很多种组合可以选择，主要有以下几种：

1. Atom＋Nuclide 官方推荐的
2. WebStorm 强大但是要钱
3. Sublime Text 3/2
4. Visual Studio Code
5. Deco

       上面的这几种，我也就选择了两种进行安装，这里主要对安装过程进行一下说明，在安装的过程中配到了很多坑，我这里主要安装了Sublime Text与Atom+Nuclide，下面将会一步一步来进行说明。

Sublime Text

       这是第一个坑，之前我本地是已经安装了Sublime Text2的，之后对该换安装React Native JS插件，但是安装多次都没有成功，每次都报如下错误：

Package Control

There are no packages available for installation

Please see https://packagecontrol.io/docs/troubleshooting for help

       或者报：

Package Control

There are no packages available for installation

Please see https://packagecontrol.io/docs/troubleshooting for help

       甚至其他错误，重试多次都没有成功，一气之下删除了Sublime Text2，下载了Sublime Text3进行安装，坑爹啊，发现还是错误，这时才发现是网络翻墙后，网络不稳定造成的，因此以下的安装都是在Sublime Text3上安装的。

Sublime Text下载

       在安装之前，需要下载安装文件，去链接下载安装文件，下载后直接点击dmg文件进行安装。

       Sublime Text的强大就在于他的插件支持，为了安装需要的插件，我们首先需要安装Package Control：

       点击View→Show Console打开控制台，输入以下内容：

       Sublime Text 3 输入内容：

import urllib.request,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f’ + ‘1e3d39e33b79698005270310898eea76’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

       Sublime Text2 输入内容：

import urllib2,os,hashlib; h = ‘df21e130d211cfc94d9b0905775a7c0f’ + ‘1e3d39e33b79698005270310898eea76’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None; print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text to finish installation’)

       之后回车，输入的内容也有可能变化，可以去Package Control查询最新的输入串，该方式需要翻墙，并且需要较好的网络，获取完成后，重新启动就ok了。

       如果上述方式没有成功安装，还可以手动进行安装：

1, 点击 Preferences → Browse Packages…
2, 进入到浏览的上一级文件夹，之后进入到Installed Packages文件夹，
3，下载Package Control.sublime-package 之后拷贝到Installed Packages文件夹下
4，重启Sublime Text

       安装完成后，按shift+command+p会调出Package Control界面，界面如下：

插件安装

       React Native 开发相关的插件主要有以下几个：

1. React-native-snippets 支持 React Native 代码片段
2. babel-sublime：支持 Javascript，ES6 和 JSX 语法高亮 或者 sublime-react + babel 也可以语法高亮

       使用shift+command+p会调出Package Control界面后，点击Package Control：Install Package 会进入到插件安装界面，之后选择React-native-snippets回车，等待，重复上诉步骤安装babel-sublime。这里需要网络好且翻墙。

       到这一步Sublime Text的React Native就配置完成了，我们来试试是否安装成功，创建一个js文件，输入rncc回车，如果已经出现了代码补全，则表示已经安装成功了，补全后的代码如下：

'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
} from 'react-native';

class Hello extends Component {
  render() {
    return (
      <View />
    );
  }
}

const styles = StyleSheet.create({

});

export default Hello;

       rncc是代码提示的快捷键，表示创建一个表示创建一个React-Native 组件类，更多的点提示快捷缩写参见react-native-snippets。

Atom+Nuclide

        上面我们已经配置了Sublime Text3的React Native JS插件，这里我们来安装官方推荐的IDE。为了掩饰安装我先讲本地的给卸载了。

安装Atom

       从下载链接下载对应的安装包，之后安装。安装后界面如下：

       之后安装Nuclide，可以查看官方网站getting-started上面有完整的安装步骤，有命令安装界面，也有图形化安装界面，这里我们主要用图形化安装界面来演示一下：

Nuclide安装

       我们先来看看get start中怎么安装：

Installation

---

       Installing Nuclide is a one-line command at the command-line:

$ apm install nuclide

       or you can go through the Atom Packages UI:

1. Open Atom.
2. Choose Atom | Preferences to bring up the Settings tab.
3. In the Settings tab, and select Install from the list at the left.
4. In the search box, type “Nuclide” and press the Enter key.
5. Click the Install button for the nuclide package.

       根据上面的引导我们来一步一步安装，首先打开Atom，我们已经打开了，之后选择Atom|Preferences，选择Install，之后输入Nuclide：

       从图上看出，上次我安装的，虽然我删除了Atom，但是Nuclide，并且默认已经是安装状态了。

依赖安装

       Nuclide安装完成后，建议安装一系列的依赖，方便开发，我们先来看看官方的指导：

Recommended Packages

       By default, Nuclide does not install all of the recommended packages that enhance the Nuclide experience. This was done purposely in order to ensure that users have to opt-in to some features rather than obtrusively modify their work environment.

       Recommended packages include:

tool-bar to enable the Nuclide toolbar. sort-lines to enable sorting
lines of text. language-ocaml to enable OCaml language syntax
highlighting. language-babel to enable language grammar for JS, Flow
and React JS, etc. …and others under package-deps.

       In order to install all of the recommended packages, go to Packages | Settings View | Manage Packages, search for the nuclide package and click on Settings.

       You will find a checkbox allowing you enable the recommended settings.

       我们按照指导来进行依赖安装，选择Packages，之后输入nuclide，最后点击settings：

       选中Install Recommended Packages on startup，之后退出，重新打开。

       Atom环境已经安装好了，之后我们来使用一下这个环境，导入上一章创建的工程，选择add project folder打开工程，之后选择index.android.js，可以在编辑窗口看到js代码了，界面如下：

       之后在任意位置输入fun看是否有代码补全，比如我们在const styles = StyleSheet.create({之前输入：

       会发现会自动提示出现如下代码：

function functionName() {

}

       代码补全已经ok了。说明我们的环境已经安装好了，之后我们就可以愉快的进行代码编写了。

运行工程

       按shift + command + p 调用出终端，输入react 可以看到匹配了很多项，最后选择 Start Packager：

       如果没有错误，肯定没有错误啊，因为是上一章建的工程，之后与上一章一样采用命令行运行：

$ react-native run-android

       或者在Android Studio中运行，命令运行需要注意gradle版本，其他的还可以选择debug模式，之后在模拟器或者真机选择Enable Remote JS debugging ，之后就可以调试了。

Flow安装

       我们在Nuclide安装的最后系统还建议安装一些东西，建议安装的东西如下：

Other Installations

---

       To benefit from all of Nuclide’s features, we recommend you also install the following:
       Flow
       Hack
       Mercurial
       Watchman - version 3.2 or above. It must be in /usr/local/bin/ or in your $PATH environment variable. Without Watchman, Nuclide will lose some functionality of its Mercurial, Remote Development, and Quick Open features.

       这里我们Watchman在上一章已经安装过了，这一章主要安装Flow，Flow是一个静态代码检测工具，可以在运行前对代码进行检查，可以及早的发现错误，比如未定义等等，可以去他的官方网站查看有哪些功能，Flow。
       flow进行检查的js文件头部必须要有// @flow标签，否则是不会对改文件进行检查的。

总结

       到此我们就已经完全的安装好了开发环境，骚年，开始折腾吧！