美文网首页
配置ReactNative开发环境

配置ReactNative开发环境

作者: LinXunFeng | 来源:发表于2017-03-31 23:02 被阅读76次

    一、环境需求

    1、安装Homebrew

    Homebrew是OS X的套件(包)管理器,用于安装Node.js和一些其他必须的工具软件。

    安装方式:

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

    2、安装npm 和 Node.js

    brew install node
    

    node安装成功后npm自动也就有了,直接下载安装Node.js,网址:https://nodejs.org/en/download/

    下载后直接安装即可

    3、安装WatchMan

    WatchMan是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

    brew install watchman
    

    4、安装Flow

    flow是一个 JavaScript 的静态类型检查器。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

    brew install flow
    

    二、React Native安装

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

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

    npm install -g yarn react-native-cli
    

    三、管理React Native库的版本

    1、查看本地的React Native的版本

    命令行输入

    react-native --version
    

    命令行效果

    查看本地的React Native的版本

    2、更新本地的React Native的版本

    命令行输入

    npm update -g react-native-cli
    

    3、查询react-native的npm包最新版本

    PM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
    npm包地址 :

    https://www.npmjs.com/package/react-native
    

    命令行查询

    npm info react-native
    

    查询效果

    ��终端中

    也可以在项目中查看


    项目中

    4、升级或者降级npm包的版本

    只要把上图终端中选择列出的一个版本号复制粘贴到对应位置替换即可,如降级到0.24.1

    npm install --save react-native@0.24.1
    

    WebStom设置React Native代码提示

    下载xml插件,解压按下面提示放到对应位置

    https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
    

    Mac下安装
    提示:如果没有templets文件夹,你可以手动创建一个

    webstorm11安装路径
    将ReactNative.xml
    复制到 ~/Library/Preferences/WebStorm11/templates

    webstorm2016.2安装路径
    将ReactNative.xml
    复制到 ~/Library/Preferences/WebStorm2016.2/templates

    webstorm2017.1安装路径
    将ReactNative.xml
    复制到 ~/Library/Preferences/WebStorm2017.1/templates

    重启 WebStorm

    相关文章

      网友评论

          本文标题:配置ReactNative开发环境

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