React Native 基本环境搭建

作者: 娘亲Joanna | 来源:发表于2016-06-22 14:10 被阅读323次

    使用终端搭建react native iOS开发环境

    1.安装Homebrew

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 
    
    终端显示:
    AppledeMac-mini-3:~ apple$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    It appears Homebrew is already installed. If your intent is to reinstall you
    
    should do the following before running this installer again:
    
     ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
    
    The current contents of /usr/local are appdata bin Cellar CODEOFCONDUCT.md etc include lib Library LICENSE.txt opt README.md share .git .github .gitignore
    
    

    2.安装nvm和nodejs

    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash 
    
    
    终端显示:
    AppledeMac-mini-3:~ apple$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash
    
     % Total % Received % Xferd Average Speed Time Time Time Current
    
     Dload Upload Total Spent Left Speed
    
    100 7728 100 7728 0 0 5266 0 0:00:01 0:00:01 --:--:-- 5267
    
    => Downloading nvm from git to '/Users/apple/.nvm'
    
    => Cloning into '/Users/apple/.nvm'...
    
    remote: Counting objects: 4732, done.
    
    remote: Total 4732 (delta 0), reused 0 (delta 0), pack-reused 4731
    
    Receiving objects: 100% (4732/4732), 1.27 MiB | 147.00 KiB/s, done.
    
    Resolving deltas: 100% (2814/2814), done.
    
    Checking connectivity... done.
    
    * (HEAD detached at v0.26.1)
    
     master
    
    => Appending source string to /Users/apple/.bashrc
    
    => You currently have modules installed globally with `npm`. These will no
    
    => longer be linked to the active version of Node when you install a new node
    
    => with `nvm`; and they may (depending on how you construct your `$PATH`)
    
    => override the binaries of modules installed with `nvm`:
    
    /usr/local/lib
    
    └── raml2html@2.4.0
    
    => If you wish to uninstall them at a later point (or re-install them under your
    
    => `nvm` Nodes), you can remove them from the system Node as follows:
    
     $ nvm use system
    
     $ npm uninstall -g a_module
    
    => You can now start using nvm
    
    现在可以使用nvm指令了
    

    要想额外的工作 必须加上如下指令就可以任意使用nvm指令了

    
    . ~/.nvm/nvm.sh 
    
    
    AppledeMac-mini-3:~ apple$ . ~/.nvm/nvm.sh 
    

    安装nodejs和npm。npm用于nodejs包依赖管理的工具。

    nvm install node && nvm alias default node
    
    
    终端显示:
    AppledeMac-mini-3:~ apple$ nvm install node && nvm alias default node
    
    ######################################################################## 100.0%
    
    Checksums empty
    
    Now using node v6.2.2 (npm v3.9.5)
    
    default -> node (-> v6.2.2)
    

    安装watchman

    watchman是用于监听文件变化的工具,应该是用于监听文件变化,然后界面做出响应

     
    brew install watchman
    
    
    终端显示:
    AppledeMac-mini-3:~ apple$ brew install watchman
    
    ==> Installing dependencies for watchman: pcre
    
    ==> Installing watchman dependency: pcre
    
    ==> Downloading https://homebrew.bintray.com/bottles/pcre-8.38.el_capitan.bottle
    
    ######################################################################## 100.0%
    
    ==> Pouring pcre-8.38.el_capitan.bottle.tar.gz
    
    🍺 /usr/local/Cellar/pcre/8.38: 203 files, 5.4M
    
    ==> Installing watchman
    
    ==> Downloading https://homebrew.bintray.com/bottles/watchman-4.4.0.el_capitan.b
    
    ######################################################################## 100.0%
    
    ==> Pouring watchman-4.4.0.el_capitan.bottle.tar.gz
    
    🍺 /usr/local/Cellar/watchman/4.4.0: 20 files, 343.7K
    
    

    安装flow

    brew install flow
    
    
    AppledeMac-mini-3:~ apple$ brew install flow
    
    ==> Downloading https://homebrew.bintray.com/bottles/flow-0.23.0.el_capitan.bott
    
    ######################################################################## 100.0%
    
    ==> Pouring flow-0.23.0.el_capitan.bottle.tar.gz
    
    ==> Caveats
    
    Bash completion has been installed to:
    
     /usr/local/etc/bash_completion.d
    
    zsh completion has been installed to:
    
     /usr/local/share/zsh/site-functions
    
    ==> Summary
    
    🍺 /usr/local/Cellar/flow/0.23.0: 7 files, 6M
    

    安装好环境 初始化react native环境

    在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name] 会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程。init过程会需要一点时间,耐心等待。

    react-native init reactNative 命令之后


    65D2BCDD-ECBD-4EBD-8F46-FDB04BCFCEE6.png
    cd  /Users/apple/Desktop/reactNative 
    (reactNative: 为你的iOS端工程的名称)
    
    再执行以下指令
     
    $ npm install -g react-native-cli   
    $ react-native init reactNative   
    $ cd  /Users/apple/Desktop/reactNative   
    
    终端显示:
    AppledeMac-mini-3:~ apple$ cd /Users/apple/Desktop/reactNative 
    
    AppledeMac-mini-3:reactNative apple$ npm install -g react-native-cli
    
    /Users/apple/.nvm/versions/node/v6.2.2/bin/react-native -> /Users/apple/.nvm/versions/node/v6.2.2/lib/node_modules/react-native-cli/index.js
    
    /Users/apple/.nvm/versions/node/v6.2.2/lib
    
    └─┬ react-native-cli@1.0.0 
    
     ├─┬ chalk@1.1.3 
    
     │ ├── ansi-styles@2.2.1 
    
     │ ├── escape-string-regexp@1.0.5 
    
     │ ├─┬ has-ansi@2.0.0 
    
     │ │ └── ansi-regex@2.0.0 
    
     │ ├── strip-ansi@3.0.1 
    
     │ └── supports-color@2.0.0 
    
     ├── minimist@1.2.0 
    
     ├─┬ prompt@0.2.14 
    
     │ ├── pkginfo@0.4.0 
    
     │ ├─┬ read@1.0.7 
    
     │ │ └── mute-stream@0.0.6 
    
     │ ├── revalidator@0.1.8 
    
     │ ├─┬ utile@0.2.1 
    
     │ │ ├── async@0.2.10 
    
     │ │ ├── deep-equal@1.0.1 
    
     │ │ ├── i@0.3.5 
    
     │ │ ├─┬ mkdirp@0.5.1 
    
     │ │ │ └── minimist@0.0.8 
    
     │ │ ├── ncp@0.4.2 
    
     │ │ └─┬ rimraf@2.5.2 
    
     │ │ └─┬ glob@7.0.5 
    
     │ │ ├── fs.realpath@1.0.0 
    
     │ │ ├─┬ inflight@1.0.5 
    
     │ │ │ └── wrappy@1.0.2 
    
     │ │ ├── inherits@2.0.1 
    
     │ │ ├─┬ minimatch@3.0.2 
    
     │ │ │ └─┬ brace-expansion@1.1.5 
    
     │ │ │ ├── balanced-match@0.4.1 
    
     │ │ │ └── concat-map@0.0.1 
    
     │ │ ├── once@1.3.3 
    
     │ │ └── path-is-absolute@1.0.0 
    
     │ └─┬ winston@0.8.3 
    
     │ ├── colors@0.6.2 
    
     │ ├── cycle@1.0.3 
    
     │ ├── eyes@0.1.8 
    
     │ ├── isstream@0.1.2 
    
     │ ├── pkginfo@0.3.1 
    
     │ └── stack-trace@0.0.9 
    
     └── semver@5.1.0 
    
    AppledeMac-mini-3:reactNative apple$ react-native init reactNative
    
    prompt: Directory reactNative already exists. Continue?: (no) yes
    
    This will walk you through creating a new React Native project in /Users/apple/Desktop/reactNative/reactNative
    
    Installing react-native package from npm...
    
    Setting up new React Native app in /Users/apple/Desktop/reactNative/reactNative
    
    reactNative@0.0.1 /Users/apple/Desktop/reactNative/reactNative
    
    └── react@15.1.0 
    
    To run your app on iOS:
    
     cd /Users/apple/Desktop/reactNative/reactNative
    
     react-native run-ios
    
     - or -
    
     Open /Users/apple/Desktop/reactNative/reactNative/ios/reactNative.xcodeproj in Xcode
    
     Hit the Run button
    
    To run your app on Android:
    
     Have an Android emulator running (quickest way to get started), or a device connected
    
     cd /Users/apple/Desktop/reactNative/reactNative
    
     react-native run-android
    
    AppledeMac-mini-3:reactNative apple$ open /Users/apple/Desktop/reactNative 
    
    AppledeMac-mini-3:reactNative apple$ open /Users/apple/Desktop/reactNative/reactNative.xcodeproj 
    
    AppledeMac-mini-3:reactNative apple$ 
    
    ~/Desktop/reactNative/reactNative/node_modules/react-native/packager ~
    
     ┌────────────────────────────────────────────────────────────────────────────┐ 
    
     │ Running packager on port 8081. │ 
    
     │ │ 
    
     │ Keep this packager running while developing on any JS projects. Feel │ 
    
     │ free to close this tab and run your own packager instance if you │ 
    
     │ prefer. │ 
    
     │ │ 
    
     │ https://github.com/facebook/react-native │ 
    
     │ │ 
    
     └────────────────────────────────────────────────────────────────────────────┘ 
    
    Looking for JS files in
    
     /Users/apple/Desktop/reactNative/reactNative 
    
    [11:25:27] <START> Building Dependency Graph
    
    [11:25:27] <START> Crawling File System
    
    [Hot Module Replacement] Server listening on /hot
    
    React packager ready.
    
    [11:25:29] <END> Crawling File System (1422ms)
    
    [11:25:29] <START> Building in-memory fs for JavaScript
    
    [11:25:29] <END> Building in-memory fs for JavaScript (142ms)
    
    [11:25:29] <START> Building in-memory fs for Assets
    
    [11:25:29] <END> Building in-memory fs for Assets (134ms)
    
    [11:25:29] <START> Building Haste Map
    
    [11:25:29] <START> Building (deprecated) Asset Map
    
    [11:25:29] <END> Building (deprecated) Asset Map (72ms)
    
    [11:25:29] <END> Building Haste Map (570ms)
    
    [11:25:29] <END> Building Dependency Graph (2292ms)
    
    [11:26:06] <START> request:/index.ios.bundle?platform=ios&dev=true
    
    [11:26:06] <START> find dependencies
    
    transformed 606/606 (100%)
    
    [11:26:20] <END> find dependencies (14252ms)
    
    [11:26:23] <END> request:/index.ios.bundle?platform=ios&dev=true (17215ms)
    
    
    
    

    从以下路径打开你创建的同名react native 就可以使用react native 开发了

    F83F1894-4598-49C6-8A5C-8125999588CB.png 8B578711-859D-4DED-B416-80F107020116.png

    相关文章

      网友评论

        本文标题:React Native 基本环境搭建

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