React Native (0.57)開發環境搭建(注意:Node不要隨便更新到最新版,更新完后莫名其妙的問題一大堆)


搭建開發環境

一、安裝依賴

必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 Xcode。

1、首先安裝 Homebrew

2、安裝 Node, Watchman

brew install node

補充:
Node.js是一個用Chrome's V8 JavaScript engine構建的 JavaScript 運行時框架。Node.js使用事件驅動、非阻塞式 I/O 模塊使得它非常的輕量級和非常的高效。Node.js的生態系統 npm 是世界上最大的開源庫生態系統。 npm的全稱是Node Package Manager,是Nodejs的包管理器。Node.js本身提供了基本的模塊,但是我們利用這些基本模塊開發實際應用需要編寫大量的代碼,做較多的工作。npm上已經有很多Node.js庫或框架,這些庫或框架可以幫助Node.js的開發者用較少的代碼完成較復雜的應用。除了使用Homebrew來安裝 Node外,我們可以從首先從官網下載Node.js 。然后一步一步安裝即可,最后安裝成功后,可以看到Node.js 和npm 都已經安裝成功了,並且安裝在/usr/local/bin目錄下。

下載地址:Node.js 官網
 
        

如果你已經安裝了 Node,請檢查其版本是否在 v8.3 以上。如下:

node -v

v8.8.1

更新node(更新完之后,npm也自動更新)

brew upgrade node

如果你已經安裝了 npm,也可以先檢查下版本號

npm -v

5.5.1

 

安裝完 Node 后(上面brew也一並安裝了npm)建議設置 npm 鏡像以加速后面的過程(或使用科、學、上、網工具)。

 

npm config set registry https://registry. npm.taobao.org--global 

 

npm config set disturl https:// npm.taobao.org/dist--global

 

注意:
1 、不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!
 
2、安裝指定版本的node。
node有一個模塊n,是專門用來管理node.js的版本的。

     1、安裝n模塊:npm install -g n

     2、升級node.js到最新穩定版:  n stable

     3、安裝指定版本: n v8.11.3

  如果報下面的這個錯誤的話: Error: sudo required

  則使用下面的這個命令: sudo n v8.11.3

 

注意:Node不要隨便更新到最新版,更新完后莫名其妙的問題一大堆,選擇使用最多的Node版本有時候可以解決很多問題。

Watchman則是由 Facebook 提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能(packager 可以快速捕捉文件的變化從而實現實時刷新)。

brew install watchman

3、Yarn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模塊的下載。React Native 的命令行工具用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。

npm install -g yarn react-native-cli

安裝完 yarn 后同理也要設置鏡像源:
 
        
yarn config set registry https://registry. npm.taobao.org --global 
 
        
yarn config set disturl https://npm. taobao.org/dist --global
 
        

安裝完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方庫名代替npm install 某第三方庫名

4、Xcode

React Native 目前需要Xcode 9.4 或更高版本。你可以通過 App Store 或是到Apple 開發者官網上下載。這一步驟會同時安裝 Xcode IDE、Xcode 的命令行工具和 iOS 模擬器。

Xcode 的命令行工具

啟動 Xcode,並在Xcode | Preferences | Locations菜單中檢查一下是否裝有某個版本的Command Line Tools。Xcode 的命令行工具中包含一些必須的工具,比如git等。

二、創建新項目

使用 React Native 命令行工具來創建一個名為"yooweiProject"的新項目:

!!!注意!!!:init 命令默認會創建最新的版本,而目前最新的 0.45 及以上版本需要下載 boost 等幾個第三方庫編譯。這些庫在國內即便翻牆也很難下載成功,導致很多人無法運行iOS項目!!!中文網在論壇中提供了這些庫的國內下載鏈接。如果你嫌麻煩,又沒有對新版本的需求,那么可以暫時創建0.44.3的版本。

react-native init yooweiProject
提示:你可以使用--version參數(注意是兩個杠)創建指定版本的項目。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

如果你是想把 React Native 集成到現有的原生項目中,則步驟完全不同,請參考集成到現有原生應用

補充說明:RN iOS 0.45以上版本開始需要依賴一些第三方編譯庫,這些庫在國內下載都非常困難(一般的翻牆工具都很難下載)
未來RN不同版本可能依賴不同版本的第三方編譯庫,具體所需庫和版本請查看ios-install-third-party.sh文件,注意先把左上角的branch切換到對應的版本。

 

然后查看需求依賴的第三方的版本:

 

然后去網盤里下載↓

 

第三方依賴庫百度盤鏈接: http://pan.baidu.com/s/1kVDUAZ9

 

下下來后請放置到以下目錄中:

 

0.58及以上版本:

 

~/Library/Caches/com.facebook.ReactNativeBuild

0.58以下的版本:

~/.rncache

 

問題是怎么來到上面的這個目錄呢?

在mac訪達finder下,利用前往文件夾,然后將~/.rncache 輸入,點擊回車就會來到該目錄下了。

全部復制完成后,就可以開始init新的RN項目,或者刪掉已有項目的node_modules重新npm install再run-ios。

 

 

三、編譯並運行 React Native 應用

在你的項目目錄中運行react-native run-ios

 
        

To run your app on iOS:

 
        

   cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject

 
        

   react-native run-ios

 
        

   - or -

 
        

   Open ios/yooweiProject.xcodeproj in Xcode

 
        

   Hit the Run button

 
        

To run your app on Android:

 
        

   cd /Users/galahad/Desktop/ziliao/RN0.57/yooweiProject

 
        

   Have an Android emulator running (quickest way to get started), or a device connected

 
        

   react-native run-android

提示:如果 run-ios 無法正常運行,請使用 Xcode 運行來查看具體錯誤(run-ios 的報錯沒有任何具體信息)。

react-native run-ios只是運行應用的方式之一。你也可以在 Xcode 中直接運行應用。如果你無法正常運行,先回頭仔細對照文檔檢查,然后可以看看論壇的求助專區

在真機上運行

上面的命令會自動在 iOS 模擬器上運行應用,如果你想在真機上運行,則請閱讀在設備上運行這篇文檔。

修改項目

現在你已經成功運行了項目,我們可以開始嘗試動手改一改了:

  • 使用你喜歡的編輯器打開App.js並隨便改上幾行。
  • 在 iOS 模擬器中按下⌘-R就可以刷新 APP 並看到你的最新修改!(如果沒有反應,請檢查模擬器的 Hardware 菜單中,connect hardware keyboard 選項是否選中開啟)

完成了!

恭喜!你已經成功運行並修改了你的第一個 React Native 應用。

 

注意:

1、你可以新建一個項目,然后用上面的代碼覆蓋你的index.ios.js或是index.android.js 文件,然后運行看看。這個是0.48的描述

         你可以新建一個項目,然后用上面的代碼覆蓋你的App.js文件,然后運行看看。這個是0.49的描述。

         自從0.49開始,index.ios.js 和 index.android.js 就不存在了,統一為index.js ,同時多了一個App.js文件。要注意分辨。

2、用react-native init 的工程, iOS文件夾中的main.jsbundle找不到,紅色的,是正常的么?

是正常的 這文件是打離線包時候可以用到的文件 需要用 react-native bundle 命令生成。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM