Question

这是一个有趣的人，我一直在寻找：

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

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

用例是我在当前时间位置渲染日视图日历网格，当前时间位置固定在距内部滚动视图开头X距离处，因此当用户滚动通过该位置时，它会显示。 / p>

到目前为止，我已尝试用另一个ScrollView包装FlatList / ListView ...还尝试将此元素呈现为标题元素，仅在页眉/页脚可见时（在视图外时被删除）才有效。

欢迎任何和所有想法。：）

由于

下面的截图（红色条是我试图渲染的内容）：

Answer 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>
    );
  }

编辑：我现在明白你希望指标与列表一起滚动。这是上面的一个简单更改，只需向ListView添加onScroll侦听器：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点的中间向右渲染。

如何在ListView或FlatList中渲染absoulute元素？

1 个答案: