3

在带有 Objective-C 的 iOS 中，我们可以UITableView通过使用方法滚动到特定的行索引，scrollToRowAtIndexPath但在 React-Native 中我没有找到这种Listview在特定行索引处滚动的方法。

以下是场景，

  1. 有Listview这样的可扩展行，例如在点击它时会扩展并且可扩展行包含TextInput组件。
  2. 在 中输入文本时TextInput，键盘将显示出来，理想情况下Listview应该向上滚动（一旦键盘放下，Listview应该向下滚动到之前的位置）。

这可以通过 Native-iOS 轻松实现，但我被困在 React-Native 中。

在此处输入图像描述

我尝试了以下方法，但效果不佳

scrollTo(x:0,y:10,animated:true)在组件中调用了一个方法Listview（实际上是它的方法Scrollview），通过它可以根据父视图的y 坐标向上/向下滚动。

我在我的代码中成功接收到键盘的 Up & Down 事件，基于此，我可以在键盘启动时以某种方式管理scrollTo（通过计算y 坐标）（如@Alexey 的回答中所述），但我不知道如何计算y键盘掉下来时的坐标？（此时理想情况下，Listview 应该向下滚动到其先前位置）。

任何帮助或提示将不胜感激！

4

1 回答 1

5

怎么样row height * item index？假设您想滚动到 ListView 中的第 20 个元素。每行都有height: 50. 我们使用上面提到的公式计算第 20 个元素的偏移量50 * 20 = 1000：然后使用scrollTo(0, 1000)，您将滚动到所需的元素。

为了能够向后滚动，您需要在应用scrollTo函数之前存储偏移量： 

var scrollProperties = this.refs.listView.scrollProperties;
var scrollOffset = scrollProperties.contentLength - scrollProperties.visibleLength;

在您连接键盘的事件（keyboardWillHide来自DeviceEventEmitter）后，您可以scrollTo对上一个偏移量进行操作。

于 2016-03-17T09:47:23.013 回答