react native（以下简称rn）里面涉及到的样式规则都是在js文件中写的，一改pc端的在样式文件中定义规则，所以pc端开发习惯的童鞋转向开发rn项目时，可能会对样式感到有些奇怪；其实react在地面实现时会转化对应的样式。

rn中的css样式是css中的一个子集，对css的一些规程进行了阉割，此外还扩展了一些css中没有的规则，例如图片样式中的resizeMode规则属性就是css没有的。具体的rn样式可以参考 《React-Native样式指南》 这篇文章，里面列出了rn中涉及到的样式规则；下面就将个人参与rn项目遇到的css进行个总结，若有错误的地方，请大家多多指教。

1、rn的布局

rn的布局是完全是用flex来实现。使用flex来进行布局是多么让人爽心悦目的一件事，按照设计图来实现一个页面是很容易的事情，写过pc端布局转向写rn的布局的童鞋，这种感觉更有强烈（个人YY的哈）；用flex解决pc端的垂直居中的问题真是小菜一碟啊；

flex的用法就不多说了，具体可参考阮一峰老师的这篇文章 《flex布局：语法篇》 ，里面对flex的讲解非常详细；

需要注意的是 ：rn中的flex的相关属性不是完全依照w3c规范提供的各种值，对其中的某些属性值进行了阉割，下面就借用 《React-Native样式指南》 中内容说明一下：

补充一点：

rn块元素默认的flex布局为column布局；

一定要注意justifyContent和alignItems这个两个属性的区别，许多开发者很容易会产生误导；

justifyContent是相对于主轴的对齐方式，而alignItems是相对于交叉轴的对齐方式。

那么，这个主轴和交叉轴如何确定呢？初学者会认为水平方向就是主轴，垂直方向就是交叉轴；错！ 主轴和交叉轴是相对于flexDireaction的值而言的，主轴和交叉轴是相对于flexDireaction的值而言的，主轴和交叉轴是相对于flexDireaction的值而言的 。重要的事情说三遍。具体而言：

来看一段代码：

1 <View style={{height:Dimensions.get('height').height}}>
2     <Text style={[styles.header]}>水平居中</Text>
3     <View style={{height:100, backgroundColor:'#333',alignItems:'center'}}>
4          <View style={{backgroundColor:'#fefefe',width:30,height:30,borderRadius:15}}/>
5      </View>
6 </View>

上面代码中，最外层的View容器默认为column布局，即flexDireaction值为column，那么主轴就是垂直方向，所以alignItems就是设置交叉轴水平方向的对齐方式，所以上面的代码运行结果是水平对齐：

2、rn样式与css样式的异同

首先样式的命名规则全部采用驼峰写法，不能使用其他写法，这样的要求估计也是按照js的写法规则来走的；其次就是上面说的rn样式是css样式的一个子集；下面列出了一些其他的差异：

<Text>文本样式继承</Text>
<View style={{backgroundColor:'#333',padding:10}}>
     <Text style={{color:'white',fontSize:18,fontWeight:'bold'}}>
           <Text style={{color:'red'}}>
                 <Text>父：我是white还是red{'\n'}
                     <Text>子：那我是神马颜色</Text>
                 </Text>
           </Text>
           <Text>{'\n'}我应该是white</Text>
      </Text>
</View>

每行条目的圆点采用定位，定位到竖线上， 注意这个地方需要将定位的元素写在非定位元素的后面，这样才能使圆点覆盖竖线，否则竖线会覆盖在圆点上，可以清晰看到竖线，达不到产品的要求， 如下图 ：