react-native 如何搭建开发环境(iOS)

作者: 肖子浩92 | 来源:发表于2015-12-28 12:12 被阅读6920次

    本章我们开始来学习一个小白如何开始走上react-native的开发道路

    rn的门槛不管是对于前端开发者还是移动端开发者来说都是很高的,既要懂原生又要懂js,技术栈是相当长的。但是没有关系,我们一步步来学习,慢慢成长吧!

    我们先来看看RN 的官方文档怎么写的:

    1-1

    如图1-1所示,

    1.我们需要安装Homebrew  

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

    install brew

    如图,出现 “Press RETURN to continue or any other key to abort”的时候记得按“回车”(有个朋友看不懂英文然后就不看了,一直在那里等着,真是无可奈何呀!)

    当你看到   ==>Installation successful!  那么就安装成功了

    2、使用Homebrew安装watchman和flow

    1)brew install watchman

    2)brew install flow

    3)brew update && brew upgrade

    brew install watchman


    brew install flow

    3、安装nvm

    1)我们使用git把nvm给git下来

    打开终端,复制黏贴  

    git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`  

    2)输入 . ~/.nvm/nvm.sh 或者 soure ~/.nvm/nvm.sh  启动nvm管理器

    3)配置下nvm管理器,使我们打开终端的时候自动启动nvm

    (1)、在终端输入:

    vi ~/.bashrc

    (2)复制黏贴  

    export NVM_DIR="$HOME/.nvm"

    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

    然后    输入   :wq!     回车

    vi ~/.bashrc

    3)vi ~/.profile (重复上一步操作)

    4)nvm install node && nvm alias default node

    等待安装完成,安装完成之后我们就可以通过npm来管理node了!

    5)国内的网络npm自带的源真的卡出了翔,所以我们要换成淘宝的源

    npm install -g nrm

    nrm use taobao

        Registry has beensetto: http://registry.npm.taobao.org/

    这样子我们就换成了淘宝的源了

    4 、快速开始启动RN工程

    1)

    npm install -g react-native-cli --verbose

    2)在你自己创建的文件目录里快速生成一个RN项目

    在桌面创建一个新的文件

    react-native init AwesomeProject --verbose

    注:

    1、执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,请使用chown修复)。

    2、由于网络的问题,很多开发者在这里会出现各种下载失败的情况,我已经把下载好的文件放到百度云。各位需要的自行下载,跟你init是一模一样的,目前版本是 0.17

    5、打开AwesomeProject -> ios->AwesomeProject.xcodeproj

    5-1

    com+R  启动项目

    注:可能nvm配置路径问题,项目运行的时候可能会出现错误

    解决方法:

    在项目启动中,cd 到AwesomeProject目录下,执行

    react-native start

    (之前的版本是npm start 新的版本已经改成了react-native start)

    结尾

    到这里,我们就快速地搭建了React-native的工程啦!!!!!


    百度云链接                              http://pan.baidu.com/s/1mhh01aK

    相关文章

      网友评论

      • 笨笨编程:感谢lz分享,我这边已经OK了
      • 新地球说着一口陌生腔调:我发现我是不是报错了?
        xuetianhhbdeMac-mini:~ xuetianhhb$ nvm install node && nvm alias default node
        Downloading and installing node v7.10.0...
        Downloading https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz...
        ######################################################################## 100.0%
        Computing checksum with shasum -a 256
        Checksums do not match: '\7ec21c06b80924893fff3eba242cbe5c8b1aadcdd6be39707b28dd3cfe8e558f' found, '7ec21c06b80924893fff3eba242cbe5c8b1aadcdd6be39707b28dd3cfe8e558f' expected.
        Binary download failed, trying source.
        Detected that you have 4 CPU core(s)
        Running with 3 threads to speed up the build
        Downloading https://nodejs.org/dist/v7.10.0/node-v7.10.0.tar.gz...
        ######################################################################## 100.0%
        Computing checksum with shasum -a 256
        Checksums do not match: '\c4843fe8bffb59c2327063a5e67a89af60d7927f7ace7548695a2cf4c1aa6d03' found, 'c4843fe8bffb59c2327063a5e67a89af60d7927f7ace7548695a2cf4c1aa6d03' expected.
      • 嗨_我是大鑫啊:我运行这样报错
        jianxue:/ jianxue$ brew update && brew upgrade

        Stashing your changes:
        M .gitignore
        M .yardopts
        M CODEOFCONDUCT.md
        M CONTRIBUTING.md
        M LICENSE.txt
        M README.md
        M SUPPORTERS.md
        error: unable to unlink old '.gitignore' (Permission denied)
        error: unable to unlink old '.yardopts' (Permission denied)
        error: unable to unlink old 'CODEOFCONDUCT.md' (Permission denied)
        error: unable to unlink old 'CONTRIBUTING.md' (Permission denied)
        error: unable to unlink old 'LICENSE.txt' (Permission denied)
        error: unable to unlink old 'README.md' (Permission denied)
        error: unable to unlink old 'SUPPORTERS.md' (Permission denied)
        fatal: Could not reset index file to revision 'HEAD'.
        error: Your local changes to the following files would be overwritten by merge:
        .gitignore
        .yardopts
        CODEOFCONDUCT.md
        CONTRIBUTING.md
        LICENSE.txt
        README.md
        SUPPORTERS.md
        Please, commit your changes or stash them before you can merge.
        Aborting
        Error: Failure while executing: git pull --quiet origin refs/heads/master:refs/remotes/origin/master
      • 还嬒继续:==> Installing dependencies for watchman: pcre
        ==> Installing watchman dependency: pcre
        ==> Downloading https://homebrew.bintray.com/bottles/pcre-8.39.el_capitan.bottle

        curl: (6) Could not resolve host: akamai.bintray.com
        Error: Failed to download resource "pcre"
        Download failed: https://homebrew.bintray.com/bottles/pcre-8.39.el_capitan.bottle.tar.gz
        Warning: Bottle installation failed: building from source.
        ==> Downloading https://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.3

        curl: (6) Could not resolve host: ftp.csx.cam.ac.uk
        Trying a mirror...
        ==> Downloading https://www.mirrorservice.org/sites/downloads.sourceforge.net/p/

        curl: (6) Could not resolve host: www.mirrorservice.org
        Error: Failed to download resource "pcre"
        Download failed: https://www.mirrorservice.org/sites/downloads.sourceforge.net/p/pc/pcre/pcre/8.39/pcre-8.39.tar.bz2

        出现这种状况怎么搞?我看网上说被墙了,我用了Lantern翻墙软件也不行,搞不懂了啊,求救
        还嬒继续:brew install watchman 出现的这种情况
      • qBryant:mark。。。回头照着搭个环境!
      • Gr__li:运行完了!!完美!.不过接下来怎么做呢?
        怎么编写呢?
        qBryant:@Gr__li 找RN的文档看看啊。。。😄
      • 你见唔到我:补充一句 :
        init 不了或者各种开不到的疑难杂症请用 :
        sudo chmod 777 /Users/xxxx/.babel.json

      本文标题:react-native 如何搭建开发环境(iOS)

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