React Native — style小筆記

哈囉，1/25我們研究 『 ReactNative 的排版佈局 』時有遇到兩個問題，所以就寫了這篇文章來筆記一下。

1. style-components中如何判斷裝置是IOS or Android

可以使用Platform.OS來判斷現在裝置，再加以進行CSS設定。

2. 畫面和狀態列重疊

一開始我們遇到這個問題，因為View從最上面開始Render，所以就先遇到重疊的問題了。

解法：加個高度20的白色View擋在上面

看起來很完美，但是人生就是有很多的But……..

一旦畫面轉向的話就變成這樣了……….

橫向時就算沒有狀態列也是會有高度20的白色View

解法：使用Dimensions判斷目前裝置是直向或橫向

使用Dimensions加入Listener，並於轉向時更新state為直向或橫向

當裝置為直向時才加入<StatusBarBackground />

結果如下：

直向

橫向

結論

這是我們研究出來的解法，因為我們也是React Native的新手，如果大家有更好的解法可以跟我們說喔。