回顧一下本人開發ReactNative及H5的相關經歷，打算寫一篇文章來對比一下ReactNative中樣式和H5中CSS的注意點
常用的用法及各個元件有哪些樣式支援等大家可以去FB的RN官網上查閱得知，https://reactnative.cn/docs/0.51/style.html#content 這裡不具體展開。這樣先主要講幾大類吧：
1、ReactNative 佈局
ReactNative的佈局完全是用Flex來使用的，垂直居中的解決最好方案，具體的Flex寫法問題可以參考 ruanyf老師的教程。但是ReactNative相較於CSS中閹割掉了部分屬性值如：
而且預設的flex佈局是column佈局(也就是預設從上到下排列),justifyContent相對於主軸對齊,alignItems是相對於交叉軸對齊(水平方向不一定是主軸,主要是看flexDireaction的值怎麼設定 row水平主軸 column垂直)
2、 ReactNative 寫法和CSS寫法的差異
ReactNative中寫法採用駝峰式，而且要有它自己支援的寫法。可以說RN中的樣式CSS中都有，是CSS樣式的子集，style屬性來代替class處理樣式。
View類似於Div, 預設佔用100%寬度，是典型也是最常用的塊狀元素
RN中絕對定位和相對定位父元素不需要設定position和zindex
Text在被View包裹時候可設定padding margin像塊狀, 在被Text包裹時候像內聯元素無法設定padding margin, 且可繼承
3、ReactNative 的樣式分離思考
如果你不喜歡CSS IN JS的寫法 ReactNative也能引入webpack的loader,
https://github.com/dengchengmi/react-native-style-loader
npm install react-native-style-loader less-loader less --save-dev
主要解決下列幾個問題
引入less預編譯，可以進行變數的定義和模組化管理
提供了px, vw, vh, rem(和css中的功能類似),pt 和ios中的pt, andorid中的dp是一個道理, 還有rem方法
支援媒體查詢 @media query
支援react native stylesheet 的巢狀
支援margin, padding, box-shadow等的簡寫
自動將id和class駝峰化
提供了calc 功能，例如：calc(~'100vh - 49pt')
media query demo
@media (min-width: 350px) and (max-width: 500px) {
html {
font-size: 100pt;
}
}
.container {
@media ios { padding-top: 20pt; }
@media android { padding-top: 25pt; }
}
另外強推 https://yogalayout.com/ YOGA這個網站，可以圖形化佈局生成程式碼
