美文网首页
React Native环境安装

React Native环境安装

作者: 永恒哎哎 | 来源:发表于2017-11-02 19:29 被阅读36次

    前言

    对于React Native这个跨平台移动应用开发框架早有耳闻,一直想抽出时间去学习,但无奈身患懒癌晚期,一直迟迟没有投入时间和精力。

    最近在找工作面试,发现很多公司已将RN作为iOS人员的必要条件,面过的几家大公司也基本上都是RN+H5+原生进行开发,纯粹原生App应用将越来越少。所以学习RN显得尤为的重要,想不如做,于是就开始了我的RN之旅。


    一、安装Homebrew

    Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。

    Homebrew是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget),Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接。

    命令行输入:

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

    哎呀,报错了!

    需要先打开Xcode

    打开Xcode后继续......

    出现successful说明安装成功

    Homebrew安装成功

    可以输入brew doctor用来检测冲突

    因为我是新安装的系统和xcode,检测时提醒我安装xcode tool

    未安装Xcode Tool

    二.安装Node.js

    React Native 需要 NodeJS 4.0或更高版本,Homebrew的Node默认包是6.0版本的,所以直接安装:

    brew install node

    出现installing node说明安装成功

    node安装成功

    三、安装React Native 命令行工具npm

    npm是一个包管理工具,它是用来管理node的,可以通过命令行工具轻松创建和初始化工程。

    npm install-greact-native-cli

    如果出现错误 :EACCES: permission denied,使用命令:

    sudo npm install -g React-native-cli

    react-native命令行从npm官方源拖代码时会遇上麻烦。需要将npm仓库源替换成淘宝的:

    npm config set registry https://registry.npm.taobao.org --global

    npm config set disturl https://npm.taobao.org/dist --global

    四、安装其他插件安装

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务

    npm install -g yarn react-native-cli

    Whtchman是Facebook开发的一个检测文件系统变化的工具,在RN开发中可以检测js文件等是否有变化,从而达到保存及编译的效果。这个在windows中也有,个人觉得可装也可以不装,直接手机上reload也是可以的。

    brew install watchman

    Flow是静态类型检查工具

    brew install flow

    webpack是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起

    brew install webpack

    五、js开发工具的安装

    WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。网上有破解版可以下载,但是有能力的还是希望支持正版,毕竟都是开发者。(我使用的是这个)

    Nuclide是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和调试React Native应用。

    相关文章

      网友评论

          本文标题:React Native环境安装

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