react-native项目之样式总结

时间 2020-06-19

原文原文链接

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

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

一、rn的布局

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

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

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

补充一点：express

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

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

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

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

flexDireaction	主轴	交叉轴
row	水平方向	垂直方向
column	垂直方向	水平方向

来看一段代码：

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就是设置交叉轴水平方向的对齐方式，因此上面的代码运行结果是水平对齐：

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

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

View相似于DIV，会默认占用容器的100%的宽度
rn元素的绝对定位和相对定位不须要父元素设置position，且没有zIndex配置
不能以偏概全说rn的inline元素不能设置marginTop、marginBottom；
须要注意的是：包裹在View元素中的Text表现为block，能够设置margin和padding的各类属性；包裹在Text元素中的Text表现为inline元素，不能设置其marginTop和marginBottom， padding等用于block元素的属性

样式的继承只存在于Text元素内的Text元素，换句话说是Text元素里面的Text元素存在继承；继承的规则是子Text元素继承祖先Text和父Text元素的样式整合后的样式。

<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>

上面运行结果以下：

能够看出，子Text元素继承了父Text的color样式和祖先Text元素的样式fontSize、fontWeight

三、一个rn样式实现的例子

　　例如在不少有电商公司，提供了供客户查询购物的物流追踪的一个进度信息，例以下图，这样的一个样式如何用rn的样式来完成的呢，下面就简单介绍了我的的思路，可能有其余更好的实现，有的话你们能够积极的分享。

实现这样的样式，须要position和border来配合实现，主要是左边连接圆点的一条竖线，具体思路：

利用每行条目边界来实现，从而造成一条连续的竖线
每行条目的圆点采用定位，定位到竖线上，注意这个地方须要将定位的元素写在非定位元素的后面，这样才能使圆点覆盖竖线，不然竖线会覆盖在圆点上，能够清晰看到竖线，达不到产品的要求，以下图：
第一个位置左边界须要修剪掉圆点上面的多余边界，方法是：采用和容器背景颜色一致的颜色来覆盖掉圆点之上的边界

具体代码能够参考以下：

 1 render(){
 2     let invoice = this.props.invoiceInfo;
 3     let items = [];
 4     invoice.expressInfoList.map((el,index)=>{
 5         let colorValue = index === 0 ? '#0b74c4' : '#888';
 6         let backgroundColor = index === 0 ? '#0b74c4' : '#e0e0e0';
 7         let className = index === 0 ? "expressRightFirst" : "expressRight";
 8         let fixEl = index === 0? <View class="fix"></View>: <Text></Text>;
 9         items.push(
10              <View class="expressItem" key={index}>
11                 <View class={className}>
12                     <View class="process">
13                         <Text class="expressDesc" style={{color: colorValue,fontSize:14}}>{el.context}</Text>
14                         <Text class="expressTime" style={{color:colorValue,fontSize:12}}>{el.ftime}</Text>
15                     </View>
16                 </View>
17                 {fixEl}
18                 <View class="expressLeft" style={{backgroundColor}}/>
19             </View>
20         );
21     });
22     return (
23              <View class="content">{items}</View>
24             )
25 }
26 
27 const styles = {
28   expressItem:{
29         flex: 1,
30         flexDirection: 'row',
31         justifyContent: 'flex-start',
32         alignItems: 'flex-start',
33         paddingLeft: 10,
34         width: Dimensions.get('window').width
35     },
36     expressLeft:{
37         width: 10,
38         height: 10,
39         borderRadius: 5,
40         backgroundColor: '#e0e0e0',
41         position: 'relative',
42         left: 15 - width,
43         top: 11
44     },
45     expressRight: {
46         flex:1,
47         paddingLeft: 25,
48         borderLeftWidth: 1,
49         borderLeftColor: '#e0e0e0',
50         flexDirection: 'column'
51     },
52     expressRightFirst: {
53         flex:1,
54         paddingLeft: 25,
55         borderLeftWidth: 1,
56         borderLeftColor: '#e0e0e0',
57         flexDirection: 'column'
58     },
59     process: {
60         paddingVertical: 10,
61         flexDirection: 'column',
62         borderBottomColor: '#e0e0e0',
63         borderBottomWidth: 1,
64         paddingRight: 20
65     },
66     fix:{
67         height:15,
68         width:30,
69         position: 'relative',
70         left: 25-width,
71         backgroundColor: '#fff',
72     }  
73 }

View Code