react-native - 当在其他地方失焦时，无法顺利滚动 Flatlist

Question

我已经构建了一个应用程序(您可以在下面看到它的屏幕截图):



起初，我的问题是，当我专注于搜索输入时，键盘会出现，但我只能通过触摸 Flatlist 而不是搜索输入周围的区域来关闭键盘。所以我添加了以下代码:

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

....并将 render() 的整个 XJS 内容包装在 <DismissKeyboard> 内，这样做我完全解决了关闭键盘的问题(我的意思是在此之后我现在可以通过触摸此页面 View 的任何位置来关闭键盘)，但是在我遇到另一个问题之后。当前问题可以通过以下步骤重现:

我刚刚渲染了页面，一切看起来都很好很酷(只是开始)

我可以轻松平滑地滚动平面列表

由于我们第一次渲染它专注于搜索输入，键盘出现了，所以为了完全看到它后面的Flatlist，应该关闭键盘...

所以我通过触摸页面中的其他地方来失去焦点

成功关闭键盘

但现在我无法顺利滚动 Flatlist

但是如果我再次专注于搜索输入，我将能够毫无问题地滚动 Flatlist

****注意**** 如果我通过单击手机的后退按钮关闭键盘，我不会遇到这个问题，但在现实世界中，考虑到用户体验，用户期望通过在某处outFocusing(关闭键盘) ) 应该能够毫无问题地滚动 Flatlist。

我试过的:

将 Flatlist 包裹在里面 ScrollView ==>//没有变化:/

将 {{ flex: 1 }} 的样式赋予 Flatlist ==>//没有变化:/

如果您以任何方式帮助我，将不胜感激

Answer 1

好的，我找到了 2 种方法来解决这个问题(推荐第一种解决方案)::

解决方案 1

我认得 TouchableWithoutFeedback对 FlatList 滚动有副作用，因为您通过 TouchableWithoutFeedback 覆盖了整个 View 所以您在触摸 FlatList 时遇到问题，因此您无法顺利滚动 FlatList。所以我决定删除 TouchableWithoutFeedback并使用 ScrollView反而::

render () {

     <ScrollView keyboardShouldPersistTaps='handled'>
       .
       . // else stuff & components
       .
       <View style={{ width: '100%', flex: 1 }}>
          <Flatlist
             .
             . // Flatlist attributes go here
             .
           />
       </View>

     </ScrollView>

等待!还没完呢!您将有嵌套滚动，以便您可以滚动所有页面(因为 ScrollView )但没有高度限制 FlatList .我的意思是您将通过滚动页面而不是 FlatList 来看到 FlatList 的所有数据项，要处理您应该添加属性 nestedScrollEnabled={true} to the 的问题。平面列表`::

render () {

     <ScrollView keyboardShouldPersistTaps='handled'>
       .
       . // else stuff & components
       .
       <View style={{ width: '100%', flex: 1 }}>
          <Flatlist
             nestedScrollEnabled={true}
             keyboardShouldPersistTaps='always'
             .
             . // Flatlist attributes go here
             .
           />
       </View>

     </ScrollView>

然后你可以享受你的代码 B-)

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- =-

解决方案 2

正如我在第一个解决方案中所说的 TouchableWithoutFeedback对 Flatlist 滚动有副作用，所以我尝试使用 TouchableOpacity相反(因为 TouchableWithoutFeedback 比 TouchableOpacity 有更多的延迟)，如果是这样，你 TouchableOpacity与 activeOpacity={1} ，但这次我只覆盖了搜索 TextInput(所以我可以处理搜索输入周围的空白区域以关闭键盘，而不会对 Flatlist 产生更多或更少的副作用)，对于 FlatList 本身，我使用了 onPress对于整个每个项目行 => onPress={() => Keyboard.dismiss()}
我可以以某种方式获得所需的结果，但我更喜欢并推荐第一个解决方案而不是这个解决方案。因为第二个解决方案不像第一个解决方案那么干净或可读(您应该单独覆盖和处理每个组件的水龙头。此外，第一个解决方案更容易和专业开发。