美文网首页
ReactNative环境搭建篇(Mac版)

ReactNative环境搭建篇(Mac版)

作者: 只敲代码不偷桃 | 来源:发表于2016-11-10 17:03 被阅读62次

引子

也说不出以后哪个技术会发展的特别好,哪个就特别差,今年我火?明年你火,谁要灭了谁?谁要被谁灭?这年头:三年看眼光,五年靠智慧,十年开外都是扯淡,只能看运气!所以,无论风云如何变幻,我们要做的就是,低头苦干,丰富自己,努力学东西,怀揣着热情和希望(讲话了:“今天很残酷,明天更残酷,但是(注意这里有个但是)后天很美好”。)以后无论干啥也都不会被人灭就行了。下面废话不多说,磨刀霍霍向牛羊吧!

一、安装Node.js

  • Node.js官网:https://nodejs.org
    node
    然后就如切菜一般,行云流水,傻瓜式安装-----一直点到不能下一步位置。

二、利用Homebrew安装watchman和flow


  • 2.2 查看brew版本,测试是否安装成功:在终端输入:
    brew -v
    如果出现
  • 2.3 接下来通过brew安装watchman
    brew install watchman
  • 2.4 接下来通过brew安装flow
    brew install flow
    具体出现什么代码之后可以进行下一步安装之类的,可以参考下面这张图:(2.2----2.4的步骤)

三、安装react-native-cli

  • 检查是否有npm,在命令行输入
    npm -v
  • 在mac终端中输入如下命令,其中-g表示全局安装
    sudo npm install -g react-native-cli


四、NVM安装

  • 第一步:以下步骤都是在终端完成
    git clone https://github.com/creationix/nvm
  • 第二步:进入nvm文件夹
    cd nvm/
  • 第三步:
    source nvm.sh
  • 第四步:
    nvm
  • 第五步:
    nvm ls -remote
  • 第六步:
    nvm ls
    注意:下图中第三步 ls可以省略,主要是为了看一下nvm文件夹下的具体文件,后面的一系列图都是终端输出的,贴上来,方便您对比参照,红色字体、蓝色边框圈住的部分是要自己在终端输入的

四、创建一个项目

  • 在终端进入一个文件夹:比如我进入到桌面ReactNative文件夹下
    cd /Users/soufunlc/Desktop/ReactNative
  • 初始化ZYDemo(这个过程有点长,跟网速有关,需要耐心等待)
    react-native init ZYDemo
    显示如下,则大功告成


    Paste_Image.png

五、运行程序

  • 点击ios文件里的运行文件直接用xcode打开,然后command+R,运行就行,注意:在运行过程中,会自动打开终端,不要怕,这是程序在启动服务器而已,别管就行。最终
Paste_Image.png

六、调试项目(命令行操作)

  • 在终端启动服务器:
    npm start
  • 进入项目路径
    cd /Users/****/Desktop/ReactNative/ZYDemo
  • 启动模拟器
    react-native run-ios

参考资料:
http://facebook.github.io/react-native/docs/getting-started.html
http://www.52learn.wang/archives/179
http://brew.sh/
https://github.com/facebook/react-native

相关文章

网友评论

      本文标题:ReactNative环境搭建篇(Mac版)

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