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 }