React Native經常使用組件在Android和IOS上的不一樣

React Native經常使用組件在Android和IOS上的不一樣

 

1、Text組件在兩個平臺上的不一樣表現

1.1 height與fontSize

1.1.1只指定font,不指定height

　　在這種狀況下，Text組件在兩個平臺上顯示都正常。

　　能夠看到，在垂直方向上，Text組件要比字高，上下都留有富餘的空間，這樣顯示出來美觀。但若是仔細看，就會發現Android平臺的顯示下方所留的控件比IOS平臺的顯示下方所留的空間要小一些。在IOS平臺上，上下富餘的空間基本相等；而在Android平臺上，上方富餘空間的高度大概下下方空間的1.5倍。

1.1.2 只指定height，不指定fontSize

　　在這種極端狀況下，不論height是何值，fontSize的值都是13。

1.1.3 fontSize等於height

　　在這種狀況下，IOS平臺和Android平臺的表現不一樣。在IOS平臺上，字的上方還有空間，但字的最下一部分沒有顯示出來。在Android平臺上，這種狀況更嚴重。

1.1.4 height大於fontSize

　　在IOS平臺上，當height等於fontSize的1.2倍時，顯示效果與只指定fontSize、不指定height相似。若是height繼續增大，此時Text組件中顯示字符的上方空間保持不變，而下方空間會隨着height的增大而增大。

　　在Android平臺上，當height等於fontSize的1.35倍時，顯示效果與只指定fontSize、不指定height相似。若是height繼續增大，此時Text組件中顯示字符的上方空間保持不變，而下方空間會隨着height的增大而增大。

1.2 邊框在兩個平臺上的不一樣表現

　　在樣式中設置邊框，好比「borderWidth:1」。

　　在IOS平臺上，可以出現預想的邊框效果。

　　在Android平臺上，邊框不會出現。

　　爲了實如今Android平臺上Text組件有邊框，須要用一個View組件包裹Text組件。而這個View組件只須要有一個樣式boderWidth。這種方式能夠適用於兩個平臺。

 

2、TextInput組件在兩個平臺上的不一樣表現

2.1 下劃線

　　Android平臺上，輸入框區域有一條下劃線，提醒用戶這裏是一個輸入框。

　　IOS平臺上，輸入框區域沒有下劃線。

2.2 父組件的alignItems屬性失效

　　在一個組件中聲明「alignItems:’center’」時，指望這個組件的子組件（TextInput）可以居中對齊。

　　在Android平臺上，TextInput組件的父組件樣式鍵「alignItems:’center’」工做正常。

　　在IOS平臺上，TextInput組件的對齊規則是從最左側對齊。

　　爲了讓IOS平臺的TextInput組件聽從父組件的對齊規則，須要將TextInput組件使用一個沒有任何屬性的View組件包裹起來。

2.3 fontSzie和height

2.3.1 只指定font、不指定height

　　在IOS平臺上，若是TextInput組件只指定fontSize，沒有指定height，這時height會取默認值0。也就是，在IOS平臺上，沒有指定樣式中height鍵值的TextInput組件不會顯示。

　　在Android平臺上，若是TextInput組件樣式中只指定了fontSize，沒有指定height，這時height會根據fontSize動態調整，保證輸入字符串的上、下方都有比較多的富餘空間。

2.3.2 height等於fontSize

　　在Android平臺上，當height等於fontSize時，TextInput組件中的字明顯被遮蓋。並且是上方被遮蓋。若是再加入設置「paddingTop:0, paddingBottom:0」，顯示正常。

　　在IOS平臺上，當height等於fontSize時，字的下方被略微遮蓋。

2.3.3 height大於fontSize

　　在Android平臺上，當指定了上、下padding爲0時，從height大於fontSize的1.1倍起，能夠認爲輸入的字符串會始終處於TextInput組件區域的中部。

　　在IOS平臺上，不管是否指定了上、下padding爲0，從height大於fontSize的1.1倍起，能夠認爲輸入的字符串會始終處於TextInput組件區域的中部。

2.4 邊框

　　在TextInput的樣式中加入「borderWidth：1」。

　　在IOS平臺上，正確顯示了邊框。

　　在Android平臺上，沒有邊框。

　　讓Android平臺的TextInput組件正確顯示邊框的方法與Text相似，把Textinput組件用一個View組件包裹起來。