RN下ScrollView包裹FlatList/SectionList类的组件,在IOS键盘遮挡问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RN下ScrollView包裹FlatList/SectionList类的组件,在IOS键盘遮挡问题相关的知识,希望对你有一定的参考价值。

参考技术A 应用场景:

ScrollView下会根据FlatList去渲染数组,且数组里有TextInput

出现问题:

直接用ScrollView包裹FlatList在安卓没有任何问题,但在ios下,

FlatList下的输入框,IOS键盘会遮挡。
如果将ScrollView里的内容打包为View当做FlatList的ListHeaderComponent属性,

IOS下没问题,但安卓下FLatList里的键盘唤起即立刻关闭

解决方法:

通过PlatForm.OS区分平台
在安卓下直接用ScrollView包裹FlatList
在IOS下将ScrollView里的内容打包为View当做FlatList的ListHeaderComponent属性

PS: 对于要将底部随输入框弹起(安卓没问题,IOS有问题),需要将route上的header置为() => <View/>,所以如果
涉及到底部随键盘弹起的问题,RN需要自定义头部,在IOS上就可以随着一起被弹起

暂无它法,特此标记!!!

以上是关于RN下ScrollView包裹FlatList/SectionList类的组件,在IOS键盘遮挡问题的主要内容,如果未能解决你的问题,请参考以下文章

[RN] React Native FlatList跳转到顶部/底部

RN FlatList使用详解及源码解析

react-native ScrollView 嵌套 FlatList滚动

[RN] React Native 使用 FlatList 实现九宫格布局

RN FlatList的吸顶操作

在 FlatList(和 ScrollView)中锁定滚动位置