react native - 一些问题的解决总结(三)

1、使用绝对定位+zIndex处理视图时，视图透明问题

当绝对定位的视图与同一层级的正常视图发生了重叠时，绝对定位的视图会变得透明，设置opacity或者backgroundColor都无法改变透明的结果

想要变得不透明，需要把绝对定位的视图的层级改到更上一层，使它与正常视图高一个层级，可以解决透明问题

绝对定位视图背景透明的情况

    正常视图

     绝对定位视图

修改为以下代码，绝对定位视图不会透明

    正常视图    

 绝对定位视图

2、在安卓机上，绝对定位的组件被键盘顶上去的情况

修改AndroidManifest.xml

在AndroidManifest.xml查询android:windowSoftInputMode属性，修改为下面的值

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

如果没有，直接添加该属性即可

采用上面这种方案会使所有的绝对定位元素都不会被顶上去，但如果你的应用里有一些画面需要底部输入框之类的，弹起键盘时又需要底部内容被顶上去的话，还有另外一种方案。

就是保持android:windowSoftInputMode不变，用ScrollView包裹住输入框和底部元素，当焦点定位在输入框弹出键盘时，底部元素也不会被顶上去。

3、FlatList无法滚动的问题

FlatList组件本质上是封装了ScrollView组件，因此很多情况下的滚动问题是可以参考官方文档里的解决方案的

记住 ScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了 flex 或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

但除此之外，还有一种可能是FlatList的子组件不支持onPress属性，将renderItem子组件的最外层修改为TouchableOpacity即可。