react native - 一些問題的解決總結(三)

1、使用絕對定位+zIndex處理視圖時,視圖透明問題

當絕對定位的視圖與同一層級的正常視圖發(fā)生了重疊時,絕對定位的視圖會變得透明,設置opacity或者backgroundColor都無法改變透明的結果

想要變得不透明,需要把絕對定位的視圖的層級改到更上一層,使它與正常視圖高一個層級,可以解決透明問題

絕對定位視圖背景透明的情況

<View>

? ? <View><Text>正常視圖</Text></View>

?????<View><Text>絕對定位視圖</Text></View>

</View>

修改為以下代碼,絕對定位視圖不會透明

<View>

????<View><Text>正常視圖</Text></View>? ??

</View>

?<View><Text>絕對定位視圖</Text></View>

2、在安卓機上,絕對定位的組件被鍵盤頂上去的情況

修改AndroidManifest.xml

在AndroidManifest.xml查詢android:windowSoftInputMode屬性,修改為下面的值

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

如果沒有,直接添加該屬性即可

采用上面這種方案會使所有的絕對定位元素都不會被頂上去,但如果你的應用里有一些畫面需要底部輸入框之類的,彈起鍵盤時又需要底部內(nèi)容被頂上去的話,還有另外一種方案。

就是保持android:windowSoftInputMode不變,用ScrollView包裹住輸入框和底部元素,當焦點定位在輸入框彈出鍵盤時,底部元素也不會被頂上去。

3、FlatList無法滾動的問題

FlatList組件本質(zhì)上是封裝了ScrollView組件,因此很多情況下的滾動問題是可以參考官方文檔里的解決方案的

記住 ScrollView 必須有一個確定的高度才能正常工作,因為它實際上所做的就是將一系列不確定高度的子組件裝進一個確定高度的容器(通過滾動操作)。要給 ScrollView 一個確定的高度的話,要么直接給它設置高度(不建議),要么確定所有的父容器都有確定的高度。一般來說我們會給 ScrollView 設置flex: 1以使其自動填充父容器的空余空間,但前提條件是所有的父容器本身也設置了 flex 或者指定了高度,否則就會導致無法正常滾動,你可以使用元素查看器來查找具體哪一層高度不正確。

但除此之外,還有一種可能是FlatList的子組件不支持onPress屬性,將renderItem子組件的最外層修改為TouchableOpacity即可。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容