美文网首页代码孔Sir收藏React Native开发
简易配置一个顺手的ReactNative开发环境

简易配置一个顺手的ReactNative开发环境

作者: 超级大柱子 | 来源:发表于2016-03-08 01:53 被阅读1574次

    安装Homebrew和node.js

    1. 一台mac
    2. Xcode 7.2或以上版本
    3. 安装好Homebrew http://brew.sh/
    4. 安装Node.js 4.0或更高版本(译注:如果你并不使用Node.js开发网站,只是用于React Native的开发,那么请先安装homebrew,然后直接使用brew install node
      安装即可,不必按照下面的nvm的安装步骤),如果你从未接触过npm,推荐阅读npm的文档
      $ brew install node
      5.在命令行中输入brew install watchman
      ,我们推荐安装watchman,否则你可能会遇到一个Node.js监视文件系统的BUG。
      6.如果你希望使用flow来为js代码加上类型检查,那么在命令行中输入brew install flow
      来安装flow。(译注:新手可以跳过这一步)

    安装ReactNative

    1. 安装react-native
      $ npm install -g react-native-cli
    2. 使用从官方服务器下载初始项目(推荐下载完成之后备份一份项目文件,因为下载起来很慢)
      $ react-native init ProjectName
    3. cd到项目根文件,然后运行项目
      $ cd ProjectName $ react-native run-ios
    4. 编辑 ~/ProjectName/index.ios.js 进行开发

    配置一个合适的IDE(更新:我最终还是选择了Sublime)

    SublimeText配置链接:把SublimeText配置成ReactNative的IDE


    查阅了网上很多帖子,大部分使用WebStorm或Atom+Nuclide.其中有几篇帖子说Atom+Nuclide会很卡,但是我自己尝试了之后并没有发现卡顿的问题.反而手感远胜WebStorm(或许是我个人的偏见).并且Nuclide的补全较好,毕竟Nuclide是Facebook官方为ReactNative订制的.
    这里就以Atom+Nuclide为例子配置.
    1. 下载Atom,并且安装
      https://atom.io/
    2. 打开终端,安装nuclide
      $ git clone https://github.com/facebook/nuclide.git $ cd nuclide $ npm install $ apm link
    3. 安装react插件,
      apm install react
      插件使用技巧:http://orktes.github.io/atom-react/
      小贴士,安装了React插件之后,jsx编写xml会有较好的自动补全.
    4. 打开Atom的自动换行:Settings->Soft Wrap
    5. 使用Atom打开之前的项目: ~/ProjectName

    享受Atom+ReactNative吧!

    1. 使用nuclide开启服务:Cmd+Shift+P, 搜索 Start Packager,开启服务
    2. 使用终端进行真机测试:
      $react-native run-ios $react-native run-android

    附:学习ReactNative的一些网站

    先看ES6语法变化 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8
    官方文档 http://facebook.github.io/react-native/
    React-Native学习指南 https://github.com/ele828/react-native-guide
    阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
    国内更新较为频繁的文章列表 https://segmentfault.com/t/react-native/blogs
    知乎日报例子 https://github.com/race604/ZhiHuDaily-React-Native

    相关文章

      网友评论

      • Hardy_Dou:使用nuclide开启服务:Cmd+Shift+P, 搜索 Start Packager,开启服务
        使用终端进行真机测试:
        $react-native run-ios $react-native run-android .

        这里为什么我的没有这些呢?

      本文标题:简易配置一个顺手的ReactNative开发环境

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