React Native 開發筆記

標籤：

ReactNativeDemo

學習ReactNative開發，搭建ReactNative第一個項目

 

React Native 開發筆記

1、安裝Homebrew

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

2、安裝wget、git、curl工具

//每次執行brew命令時，最好先執行brew update 或者 brew upgrade 來保持上述幾個程式為最新版本。

$ brew update

 

//接下來安裝 wget 工具

$ brew install wget

 

//安裝git指令執行的工具

$ brew install git

 

//安裝curl工具

$ brew install curl

3、安裝npm工具，這時會自動安裝node.js，並自動化佈建環境變數

$ brew install npm

 

//安裝telnet命令，Mac OS內建有，不需要安裝

$ brew install telnet

Error: No available formula with the name "telnet" 

 

//安裝bower、gulp構建js工具

$ npm install gulp bower -g

 

$ npm install gulp -g

 

 

//安裝好node.js，檢查node.js和使用

$ node

> console.log("hello");

hello

> .exit

 

 

//安裝watchman，調試js的工具

$ brew install watchman

 

//安裝flow，調試js的工具

$ brew install flow

 

//查看brew下安裝了工具列表        

$ brew list

curl        git     openssl     watchman

flow        node        pcre        wget

4、快速開始

1、安裝 React Native 組件

React Native 需要一些在 開始 React Native 中闡明的基本的安裝。 在完成了這些依賴項的安裝之後，這裡有兩條可以為一個 React Native 項目完全準備好的命令。

$ npm install -g react-native-cli

react-native-cli 是完成剩餘安裝的命令列工具。它是通過 npm 安裝的。這將會在你的終端裡面安裝 react-native 這個命令列，你只需要做一次即可。

$ react-native init AwesomeProject

 

譯註：由於眾所周知的網路原因，react-native命令列從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像：

 

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

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

 

另，執行init時切記不要在前面加上sudo（否則新項目的目錄所有者會變為root而不是目前使用者，導致一系列許可權問題，請使用chown修複）。

2、運行iOS應用

$ cd AwesomeProject

 

用XCode開啟ios/AwesomeProject.xcodeproj並點擊Run按鈕。

使用你喜歡的文字編輯器開啟index.ios.js並隨便改上幾行。

在iOS Emulator中按下?-R就可以重新整理APP並看到你的最新修改！

3、運行Android應用

$ cd AwesomeProject

$ react-native run-android

 

使用你喜歡的文字編輯器開啟index.android.js並隨便改上幾行

按Menu鍵（通常是F2，在Genymotion模擬器中是?+M）然後選擇 Reload JS 就可以看到你的最新修改。

在終端下運行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的應用的日誌。

5、為已有的React Native工程添加Android支援

如果你已經有了一個只有iOS版本的React Native工程，並且希望添加Android支援，你需要在你的工程目錄下運行以下命令：

開啟package.json檔案，在dependencies項中找到react-native，並將其後的版本號碼修改為最新版本。

 

$ npm install

$ react-native android

6、啟動 watchman 服務

查看 watchman 服務啟動結果

在瀏覽器運行：

http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false

看看結果是不是下面效果，是則服務啟動成功。

 

7、運行結果

1、第一次運行手機肯定報錯

 

2、這時候搖一搖手機，點擊Dev Settings後，點擊Debug server host & port for device,設定IP和連接埠

 

3、這裡的IP是電腦的IP，不知道的可以在命令列中輸入ipconfig進行查詢，連接埠號碼固定8081

 

4、設定完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程式就運行起來，出現Welcome to React Native！

 

5、第一次運行React Native 項目結束。

React Native 開發筆記