React-Native SectionList 滚动到Android上的项目

Posted 2023-02-16

【中文标题】React-Native SectionList 滚动到Android上的项目

【英文标题】：React-Native SectionList scroll to item out of view on Android

【发布时间】：2019-10-17 19:38:38

【问题描述】：

对于我正在进行的项目，我需要创建一个组件，用户可以在其中向处于状态的数组添加条目，并使用SectionList 来显示这些条目。此外，我需要 SectionList 在输入后立即向下滚动到最新条目。 Please check out this snack for an example

列表本身会显示所有条目并在添加新条目后更新，但是一旦列表包含的内容超出屏幕可以显示的范围，它只能向下滚动到倒数第二个，我真的需要滚动到最后一个。

我尝试了很多东西，包括等待 setState、定义 contentContainerStyle、将整个东西转换为 VirtualizedList 和 ScrollView，我能想到的一切，但我根本无法让它滚动到最后一个条目。

问题：如何让我的 SectionList 滚动到当前超出 SectionList 组件范围的最后一项？

更新 我知道这个问题是由调用 scrollToLocation 时 SectionList 不包含该项目引起的。解决方案的关键似乎是等待列表的重新渲染

更新 2 SetState 有一个回调也不能解决这个问题。但是，this 评论中的解决方案有效。它的问题在于它仅适用于 .js 文件，而我正在整个项目中使用 .tsx 文件。我该如何克服呢？

【参考方案1】：

显然这是 React-Native 0.59.6 中的一个错误。

在android上，在setState的完成块中工作时，需要设置0.2秒的超时时间，之后，SectionList会一直向下滚动。但是，应该存在的项目尚未渲染，有时会在 0.5 秒后出现，从而导致非常笨拙的感觉。

我已经发布了一个问题Here，希望尽快修复

【参考方案2】：

我认为问题比这简单得多，并且与您的风格有关。

您要求列表具有height: Dimensions.get('window').height - 50，但由于您无法修复SectionList 的高度，这一行没有任何作用。

所以你可以删除它并添加一个边距：

list: 
  top: 50,
  marginBottom: 50,
,

【讨论】：

感谢您的回答！这与它无关。如果我添加一个执行向下滚动的按钮，然后点击它，它就可以正常工作。这确实是组件在向下滚动时没有更新的问题

好吧，自动滚动对我不起作用，但可以通过更新 ScrollToLocation 参数轻松修复。 this 是你所期望的吗？

感谢您查看我的示例。您的修改版本仍然存在我的问题：列表更新并滚动，但仅到倒数第二项。我发现：medium.com/@ivansky/… 对 .js 文件很有帮助，但在我的项目中，我使用 typescript，这似乎并不适用。您对如何在 Typescript 中等待 setSate 有什么建议吗？

有趣的是，使用SetState的callBack并不能解决这里的问题。到目前为止唯一有效的是链接中的解决方案，但由于我在整个项目中使用打字稿，所以似乎不行

哦，我是在 ios 上模拟的，但问题只出在 Android 上。这很奇怪。添加 100 毫秒的超时可以解决问题，但很丑陋。