美文网首页我爱编程
ReactNative环境配置初始化

ReactNative环境配置初始化

作者: 进阶的蚊子 | 来源:发表于2018-06-20 11:28 被阅读31次

    加班加了太久 ,终于闲下来一周,写关于ReactNative的 ,这个也是面试最喜欢问到有没有做过的,当然啦实际工作中真的用到的不是很多,具体看公司了.
    React Native 可以通过更新远端JS,直接更新app, 用 JavaScript 调起 native 组件,将增强与高性能组件交给 native 来处理 . 相比其他 hybrid 框架而言, ReactNative并非通过 webview 来调用原生组件,而是直接调用操作系统自带的 javascriptCore, 所以更高效。

    环境配置
    参考文档 http://facebook.github.io/react-native/

    React Native 主要依赖以下环境:

    Mac OS X操作系统
    Xcode, 推荐使用7.3.0或者更高版本。
    Node.js V6.2.1或者最新版本。
    watchman和flow。
    NVM

    1. xcode 这个mac 系统开发必备 直接去appstore 下载
      2.安装Node.js
      官网下载 https://nodejs.org/
    179A13B4-275F-4141-B57E-3EF7698F6FC5.png
    1. 安装 Homebrew
      官网 https://brew.sh/index_zh-cn
    90A90A1B-B556-4D2D-806C-319C5FA95A5B.png

    从图我们可知需要在终端输入输入命令
    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    运行有点耗时 耐心等待

    B40CCD68-8332-4A31-9D0B-6F6A86D37231.png

    4 .通过brew安装watchman和flow
    React Native 包管理器使用了watchman ,flow是 Facebook 公司出品的一个类型检查库,它同样被 React Native 所采用.
    安装好Homebrew 之后,依次运行以下命(比较耗时时):
    //检查版本
    brew -v
    //安装watchman
    brew install watchman
    //安装 flow
    brew install flow


    453F43C9-7B14-4D73-8050-F1731D8E9C7B.png 80B16A95-E344-494B-8C8F-42D253A2D3B2.png

    5.安装react-native-cli命令行工具
    在MAC终端中输入如下命令,其中-g表示全局安装。
    这个步骤将会在你的系统全局安装 React Native 命令行工具。[图片上传中...(FADBE80D-66BD-47B4-9216-67076BCA8EBF.png-99097e-1529464719169-0)]

    sudo npm install -g react-native-cli


    F1F6B551-22D8-4A6B-A2DA-5758FB6DF51E.png

    6.安装 安装NVM
    Reace Native 使用nvm管理不同的node和npm.

    git clone https://github.com/creationix/nvm

    安装成功后我们就可以开始建立项目测试了

    先建立个文件夹RNDemo 为了方便 我就放在桌面
    进入文件目录
    然后输入react-native init HelloWorld 运行 有点慢 要有耐心 当然也可能是公司电脑太渣的原因 .....


    02F36076-CCC9-4558-909D-7881EFBCDE3B.png

    等待运行完成后 我们去目录查看下 一个工程就建立好了


    B6326CAC-3830-42F6-B5AD-798E3B2B8207.png
    0B5C9ABF-4AF3-45C2-9661-1CE1B5DB8C05.png

    然后就可以愉快地进行RN编程了

    相关文章

      网友评论

        本文标题:ReactNative环境配置初始化

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