小编Cod*_*ana的帖子

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

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

在此处输入图片说明

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

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

  • 成功关闭键盘

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

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

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

我试过的:

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

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

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

react-native react-native-flatlist

6
推荐指数
1
解决办法
621
查看次数