在 iPhone X 發表之前，大家應該就多少有聽到傳聞、甚至看到照片，而當時在看到全螢幕上方的咩咩頭瀏海時，我就開始疑惑 UI 會有什麼樣的變化，身為前端開發者，嗅到一股不太妙的預感，但憑著 "在發表會之前，我只相信林志穎" 的信念，這些都是幻覺，嚇不倒我的。

萬萬沒想到，發表會影片一播，竟然如同傳聞的一模一樣...

接著在發表會隔天就在 Facebook 看到其他開發者的哀嚎

plurk-on-iphoneX.jpg

於是我也去找了 Xcode 測試版，下載來試看看 React Native App 在 iPhone X 上的樣子，想體驗的人可以到這個網址下載 GM 版本的 Xcode 9 (BTW, macOS High Sierra 10.13 GM 也剛剛釋出了)

下載過程不是很順利，檔案有5GB，但下載速度不快，大約只有幾百 KB/s，而且不是很穩定，前三次都下載到一半斷掉，花了好幾個小時才載完.....

由於是 beta 版，還是不建議大家直接蓋掉舊的 Xcode 可以將下載的 beta 版 Xcode 先重新命名後再放到 應用程式 資料夾

新版的 Xcode 模擬器確實有不少變化，首先是 iOS 模擬器外觀大改，去掉了傳統的 Nav，且外觀也模擬的更真實，質感 up up

iPhone 5s

iPhoneSE.png

iPhone X

iPhoneX.png

在模擬器 hover 或 focus 的狀態下，底下會有一個黑色標籤裝置顯示名稱和系統版本，其中我覺得最特別的是，如果你仔細看的話會發現多出了模擬器側邊的按鈕 (Home鍵、電源鍵、音量鍵、靜音開關)，現在這些實體按鈕也能夠透過點選直接操作了，而且聲音效果也有，例如：按電源鍵鎖定畫面，會有大家熟悉的鎖定音效，總之和之前相比，模擬的完成度又提高許多

React Native - iPhone X 測試

iPhoneX-React-Native.png

真的跟 FB 上看到的一樣悲劇

專案相關套件版本

1
2
3
4
5
6
{
 	"react": "16.0.0-alpha.12",
 	"react-native": "0.47.1",
 	"react-native-router-flux": "^4.0.0-beta.18",
 	"react-native-vector-icons": "4.2.0"
}

畫面中的 Navbar 和 TabBar 都是 react-native-router-flux 這個套件預設的樣式 ( react-native-router-flux 是一個 based on React Navigation 的場景管理套件 )

嗯....　看來有太多要改的地方了　還是先改天吧

希望在 iPhone X 上市前，RN 會有對應的規劃