0

这是我一直在戳的一个有趣的东西：

我有一个 FlatList （与 ListView 相同的问题），我想在内部滚动容器内呈现一个具有以下特征的元素：

  • 绝对定位（因此对列表元素的位置没有影响）
  • 位置 XX 距离顶部（translateY或top）
  • zIndex（在列表元素之上）

用例是我在当前时间位置渲染一个带有水平条的日视图日历网格，该位置与内部滚动视图的开头固定在 X 距离处，因此当用户滚动通过该位置时它会出现。

到目前为止，我已经尝试将 FlatList/ListView 与另一个 ScrollView 包装在一起...还尝试将此元素渲染为仅在页眉/页脚可见时才起作用的页眉元素（在视野之外时被丢弃）。

欢迎任何和所有想法。:)

谢谢

下面的屏幕截图（红色条是我要渲染的）：

日视图日历网格

4

1 回答 1

1

这是您想要实现的工作演示：https ://sketch.expo.io/BkreW1che 。您可以单击“预览”在浏览器中查看。

这是测量 ListView 的高度并将指示器放在其顶部所需的主要代码（请访问上面的链接以查看完整源代码）：

  handleLayout(event) {
    const { y, height } = event.nativeEvent.layout;

    // Now we know how tall the ListView is; let's put the indicator in the middle.
    this.setState({ indicatorOffset: y + (height / 2) });
  }

  renderIndicator() {
    const { indicatorOffset } = this.state;

    // Once we know how tall the ListView is, put the indicator on top.
    return indicatorOffset ? (
      <View style={[{ position: 'absolute', left: 0, right: 0, top: indicatorOffset }]} />
    ) : null;
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          onLayout={(event) => this.handleLayout(event)}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
        {this.renderIndicator()}
      </View>
    );
  }

编辑：我现在了解到您希望指示器与列表一起滚动。这是上面的一个简单更改，只需onScroll在 ListView 中添加一个侦听器：https ://sketch.expo.io/HkEjDy92e

  handleScroll(event) {
    const { y } = event.nativeEvent.contentOffset;

    // Keep the indicator at the same position in the list using this offset.
    this.setState({ scrollOffset: y });
  },

onScroll有了这个变化，由于回调的延迟，指标实际上似乎有点滞后。

如果您想要更好的性能，您可以考虑将指标渲染为您renderRow方法的一部分。例如，如果您知道指标应该在上午 10:30 出现，那么您将在上午 10:00 行的中间呈现它。

于 2017-03-30T01:35:52.797 回答