React Native的iOS開發步驟以及崩潰收集

標籤：

 React Native的iOS開發以及崩潰收集

 

簡介

React Native使你能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建世界一流的原生APP。

React Native著力於提高多平台開發的開發效率 —— 僅需學習一次，編寫任何平台。(Learn once, write anywhere)

Facebook已經在多項產品中使用了React Native，並且將持續地投入建設React Native。

 

準備安裝

iOS只能MAC下開發,需要Xcode; Android三個平台都可開發,需要Android Studio。

 

必需的軟體

1.Homebrew

Homebrew, Mac系統的包管理器，用於安裝NodeJS和一些其他必需的工具軟體

 

譯註：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的許可權問題。可以使用下面的命令修複：

 

2.Node

使用Homebrew來安裝Node.js.

3.ReactNative的命令列工具(react-native-cli)

React Native的命令列工具用於執行建立、初始化、更新項目、運行打包服務（packager）等任務。

如果你看到EACCES:permission denied這樣的許可權報錯，那麼請參照上文的homebrew譯註，修複/usr/local目錄的所有權：

 

4.Xcode

React Native現在的版本需要Xcode 7.0或更高版本。你可以通過App Store或是到Apple開發人員官網上下載。這一步驟會同時安裝Xcode IDE和Xcode的命令列工具。

注: android需要安裝AndroidStudio工具

驗證

產生一個react-native工程

同時會產生iOS和android的相關項目

 

index.ios.js和index.android.js是寫js指令碼的地方

 

ios下是Xcode工程，android下是gradle工程

切換到工程目錄下，運行iOS工程

效果如下:

如何開發

組件是React Native應用的基石，比如：

1.Image對應iOS下的UIImage，Android下的ImageView

2.ActivityIndicatorIOS對應iOS下的進度列指示器:UIActivityIndicatorView

3.ToastAndroid對應Android下的懸浮提示框:Toast

那麼一個典型的RN應用的使用者介面(UI)是如何產生的呢？

首先是聲明組件（以及嵌套組件），然後組件被轉換為了對應平台的原生UI組件。

 

核心組件

下面介紹的是一些React Native應用中常用的核心組件，它們既可以單獨使用，也可以組合使用。

他們是iOS和Android可以共用的組件，包括:Text Image View TextInput ListView

總結: 這裡介面的書寫，跟WPF的XAML檔案，android的xml檔案比較類似。

WPF的Xaml：

 

Android介面布局檔案:

 

各平台有關的組件:

使用React Native，你可以使用標準的平台組件，例如iOS的UITabBar或安卓的Drawer，他們不能跨平台使用，只能各自使用各自的。這使你的app獲得平台一致的視覺效果和體驗，並且獲得最佳的效能和流暢性。 使用對應的Reactcomponent，就可以輕鬆地把這些原生組件整合到你的React Native應用中， 例如TabBarIOS和DrawerLayoutAndroid。DrawerLayoutAndroid封裝了平台DrawerLayout（僅限安卓平台）的React組件。

      

原生UI組件

React Native已經封裝了大部分最常見的組件，譬如ScrollView和TextInput，但不可能封裝全部組件。這些的話就需要我們自己去封裝使用。

原生模組

有時候App需要訪問平台API，但React Native可能還沒有相應的模組封裝；或者你需要複用Objective-C、Swift或C++代碼，而不是用JavaScript重新實現一遍；又或者你需要實現某些高效能、多線程的代碼，譬片處理、資料庫、或者各種進階擴充等等。

我們把React Native設計為可以在其基礎上編寫真正的原生代碼，並且可以訪問平台所有的能力。這是一個相對進階的特性，我們並不認為它應當在日常開發的過程中經常出現，但具備這樣的能力是很重要的。如果React Native還不支援某個你需要的原生特性，你應當可以自己實現該特性的封裝。

 

建立應用

切換到某一個目錄下，在命令列下執行:

react-native init SampleAppMovies

1.ui有關的基本在js裡編寫，有現成的react組件就是用現成的，包括跟iOS，Android各平台有關的組件；沒有現成的，就自己封裝。

2.邏輯代碼能在js裡實現的，就js書寫，如果某些跟平台有關的功能react native沒實現，則開發原生模組，相互調用

 

總結

1.ios和Android確實有很多代碼可以通用

2.ios和android代碼並非完全通用，有可能會需要維護兩套，或者在代碼內做一些判斷。並非網上大家說的，寫一次代碼，多端通用，尤其是實際開發的時候，還是需要瞭解底層原理，自己開發跟原生橋接的組件

不過跟”Learn once, writeanywhere”理念倒是符合的，React Native不強求一份原生代碼支援多個平台，所以不提“Write once, run anywhere”（Java）。

3.一個比較明顯的使用情境:熱更新

原理: 要實現RN的指令碼熱更新，我們要搞明白RN是如何去載入指令碼的。
在編寫商務邏輯的時候，我們會有許多個js檔案，打包的時候RN會將這些個js檔案打包成一個叫index.android.bundle(ios的是index.ios.bundle)的檔案，所有的js代碼(包括rn原始碼、第三方庫、商務邏輯的代碼)都在這一個檔案裡，啟動App時會第一時間載入bundle檔案，所以指令碼熱更新要做的事情就是替換掉這個bundle檔案。

崩潰收集

1.在Xcode工程裡寫的原生代碼，可以直接使用iOS崩潰收集機制，比如三方的SDK：雲捕

2.js中的代碼，崩潰收集機制如下，單獨開發個SDK即可

參考地址:

React Native中文網

React Native的iOS開發步驟以及崩潰收集