美文网首页
React Native Mac系统下环境搭建

React Native Mac系统下环境搭建

作者: 醜捌怪 | 来源:发表于2017-12-13 11:20 被阅读0次

    安装

    Homebrew

    Homebrew 是Mac系统的安装包管理工具,可以用它来安装和管理其他的工具包。

    安装方式,在终端输入下面这段指令点击回车:

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

    安装完Homebrew之后,使用Homebrew来安装其他所需的工具。

    Node

    使用Homebrew安装Node.js。注:React Native目前需要NodeJS 5.0或更高版本。

    $ brew install node

    安装完成之后可以在终端输入node -v来查看当前安装的node版本。由于新版的Nodejs已经集成了npm,所以npm也会一并自动安装完成,使用npm -v查看当前npm的版本。

    npm(node package manager)是node的包管理工具,顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。

    React Native的命令行工具(react-native-cli)

    使用npm来安装 react-native-cli:

    $ npm install -g react-native-cli

    安装成功之后会输出:

    /usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
    +react-native-cli@2.0.1
    added 41 packages in 9.535s

    Xcode

    React Native目前需要Xcode 8.0 或更高版本。可以通过App Store或者直接到Apple开发者官网上下载。安装完Xcode之后同时会安装Xcode的命令行工具。

    开发工具Atom

    开发工具可以选择Atom或WebStorm或Sublime Text或Visual Studio Code来编写React Native应用,我这里用的Atom开发工具。去Atom官网下载安装包直接安装就行了。

    Nuclide

    Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

    安装方式:
    1)打开 Atom,点击顶部菜单栏"Atom"->"Preferences",会跳转到"Settings"页面。

    setting.png

    2)点击"install",在输入框输入nuclide,点击"Packages"。

    nuclide_install01.png

    安装完nuclide之后,导航栏会多出一个"Nuclide"选项。

    nuclide_install02.png

    3)点击菜单栏"Atom"->"Preferences",进入"Settings"页面。点击"Packages",在输入框中输入nuclide,点击nuclide的"Settings"按钮。

    nuclide_install03.png

    往下翻,勾选"Install Recommended Packages On Startup"


    nuclide_install04.png

    4)关闭Atom再打开,就会自动开始下载Atom一些相关的插件。


    nuclide_install05.png

    下载完成之后,Atom就会多出一个工具栏。


    nuclide_install06.png

    Watchman

    Watchman是由Facebook提供的监视文件系统变更的工具。React Native官方推荐安装该工具。

    安装:

    $ brew install watchman

    Flow

    Flow是一个静态的JS类型检查工具,注:比如在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。

    安装:

    $ brew install flow

    安装完成之后,在终端中输入"which flow",查询出flow的路径,将其配置到Atom中。


    flow_install01.png

    在"Setting"页面搜索到nuclide插件,点击"Setting",找到"Nuclide-flow"这一项并单击。

    flow_install02.png

    找到"Path to Flow Executable",在输入框中输入flow的包路径。


    flow_install03.png

    最后:测试安装

    创建一个React Native项目,该过程可能会有点慢,耐心等待就好。

    $ react-native init <项目名称>

    创建完成之后,进入到该项目根目录,运行项目。

    $ cd <项目名称>

    $ react-native run-ios

    运行成功之后,会自动打开Xcode模拟器,就可以看到运行的效果了。

    相关文章

      网友评论

          本文标题:React Native Mac系统下环境搭建

          本文链接:https://www.haomeiwen.com/subject/pvdaixtx.html