在其他地方失焦时无法平滑滚动平面列表

Question

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

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

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

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

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

• 我可以轻松流畅地滚动平面列表

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

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

• 成功关闭键盘

• 但现在我无法顺利滚动 Flatlist

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

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

我试过的：

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

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

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

Answer 1

好的，我找到了两种方法来解决这个问题（推荐第一种解决方案）：：

解决方案1

我认识到这TouchableWithoutFeedback对 FlatList 滚动有副作用，因为您覆盖了整个视图，所以TouchableWithoutFeedback您在触摸 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 theFlatList`::

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()}

我可以以某种方式获得所需的结果，但我更喜欢并推荐第一个解决方案而不是这个解决方案。因为第二个解决方案不如第一个解决方案那么干净或可读（您应该分别覆盖和处理每个组件的水龙头。此外，第一个解决方案更容易和专业开发。