Question

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

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

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

....，然后将render（）的整个XJS内容包装在<DismissKeyboard>内，这样做就彻底解决了关闭键盘的问题（我的意思是在此之后，我现在可以通过触摸来关闭键盘此页面视图的任何位置），但是在出现其他问题之后。当前问题可以通过以下步骤来重现：

我刚刚渲染了页面，一切看起来都很好而且很酷（只是开始）
我可以轻松地平滑浏览列表
由于我们首次将其呈现为搜索输入的焦点，因此出现了键盘，因此为了完全查看其背后的Flatlist，应关闭键盘...
所以我专注于触摸页面中的其他地方
键盘成功关闭
但是现在我无法平滑滚动“平面列表”
但是如果我再次专注于搜索输入，我将能够毫无问题地滚动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 the FlatList` ::

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

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

当聚焦在其他地方时，无法平滑滚动“平面列表”

1 个答案: