回顾一下本人开发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这个网站，可以图形化布局生成代码