React Native 從頭學筆記5 — 終於來看程式碼。

圖一:初始專案的內容

從「圖一」,可以觀察到幾件事:

  1. 預設支援的 iOS 版本是 iOS 8。依 Apple 的線上統計,可知95%的用戶都至少使用 iOS 9;再過幾個月 iOS 又會有更新的版本釋出。在這個時機點 (四月份) 來說,這個版本支援實在有點落後。
  2. 預設加上了 tvOS 的「Target」。這是為什麼哩…。
  3. 使用 Objective-C,而非看似主流的 Swift 3。(我個人覺得挺好)
  4. 使用的 Libraries 的量,不少。(左手邊一排)
  5. 沒有 Storyboard 的檔案。(可以想像,但是心裡還是涼了一大截。)
  6. 沒有 CoreData 的檔案。(可以想像,但是心裡還是涼了一大截。)

試著直接執行 Unit Test:

"似乎" 通過了。留下一堆紅色的錯誤,但是顯示「Test Successed」。細看一下預設的測試程式碼:

使用 NSRunLoop ,基本上就可以算是一個壞味道。語法上有點臭、長,空格也留得不好。應該會被靜態程式碼檢查程式打槍。

來看看真正的程式進入點:AppDelegate.m。

AppDelegate.m

我還是不知道為什麼在 import 處會有紅色錯誤的告警,我不是都還沒碰任何一行程式嗎?唉…繼續看下去。

上面的程式碼,做了兩件事,29行~34行是「有點古典」的程式碼。本來是 Xcode專案都一定會有的幾行,用意是在 iOS 設備上唯一的視窗(window)上,加上一個身為最基礎 (root) 的畫面(view),然後顯示視窗物件。

古典 AppDelegate.m 中會有的程式碼

現在的 AppDelegate.m 已經只剩下如下面程式碼的樣子了:

現在 AppDelegate.m 中相同函式的程式碼

原因主要是:React Native 不使用 Storyboard,所以讓自己指派 RootViewController 的需求,復辟了。

再來比較看看下圖中的左右:

React Native 專案中:

  1. 少了 Main.storyboard。
  2. 少了 ViewController.h 及 ViewController.m.
  3. 以 LaunchScreen.xib (較原始的方式) 取代了 LaunchScreen.storyboard (較新的功能)。

既然少了 storyboard 檔,又沒有實作 ViewController.h/m ,那麼 RooViewController 的實作在哪?這個就是 React Native 用來切入 iOS App 的 bridge 點了。來看看下面的程式碼:

以 RCT 為前綴的類別名稱,就是 React Native 的類別。第3行載入了 index.ios.js 並初始化了 RCTRootView、設定了背景色。然後:

UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;

把 rootView (RCTRootView 的物件)指設為一個 UIViewController (iOS 的原生 ViewController 類別) 的 view property。就這樣,React Native 的「畫面」被「貼上」螢幕上了。

所以本來 iOS 提供的 MVC 架構去哪了?只貼了一層皮上去不是嗎?其實…我來看的話,差不多等於這樣。也可以說,要在那層皮上去組織自己的 MVC 機制,或是不斷地自行開發、去 Github 上找別人協助包好、能和原生元件/機制溝通的 libraries。

最後來看看類別圖的大略整理,藍色部分是 React Native 提供的類別:

上面的類別結構,對於「使用 React Native 」的開發者來說,並不需要太多的了解。至少理想上不需要,假設 React Native 的機制很健全。不過實際上,目前可能需要知道,因為還有很多原生的機制未被完整支援。應該還是有不少時候,我們得自己來。(所以我不覺得不懂 iOS 原生 App 的人,寫得起 React Native App。)

使用 RCTRootView 替換 UIView (多型),RCTRootView 持有 RCTBridge 的物件向更底層的抽象 (JS前綴的類別) 進行溝通;JS 前綴的類別負責把轉譯 JavaScript 與原生 NSObject 之間的 context。

以上。

Like what you read? Give WuFeng Chiang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.