Question

我正在尝试渲染像这个iOS组件的弯曲垂直列表：https://github.com/makotokw/CocoaWZYCircularTableView

该组件（用Obj-c编写）在布局时迭代可见单元格，并使用asin设置框架（即缩进）。

我知道在React Native中我可以在renderItem回调中设置leftMargin样式，但我无法弄清楚如何获取项目的屏幕索引 - 我所拥有的只是源数据的索引。而且，在那一点上，我认为我无法进入绝对位置。

有什么想法吗？

Answer 1

您正在寻找的功能是的 onViewableItemsChanged 即可。您可以将它与我们提供的 viewabilityConfig 一起使用的 minimumViewTime，viewAreaCoveragePercentThreshold，waitForInteraction 可以相应设置

const VIEWABILITY_CONFIG = { minimumViewTime: 3000, viewAreaCoveragePercentThreshold: 100, waitForInteraction: true, }; _onViewableItemsChanged = (info: { changed: Array<{ key: string, isViewable: boolean, item: any, index: ?number, section?: any, }> } ){ //here you can have the index which is visible to you } <FlatList renderItem={this.renderItem} data={this.state.data} onViewableItemsChanged={this._onViewableItemsChanged} viewabilityConfig={VIEWABILITY_CONFIG} />

Answer 2

感谢您的回答。

我最终做的是使用列表的滚动偏移量导出可见项目。这很简单，因为列表项都具有相同的高度。

我在onScroll处理程序中执行此操作，此时我计算每个项目的水平偏移量（我使用leftMargin / rightMargin来渲染它）。它并不完美，但确实给了我一个椭圆列表。

_handleScroll = (event) => {
  const topItemIndex = Math.floor(event.nativeEvent.contentOffset.y / LIST_ITEM_HEIGHT);
  const topItemSpare  = LIST_ITEM_HEIGHT-(event.nativeEvent.contentOffset.y % LIST_ITEM_HEIGHT);

  const positionFromEllipseTop = (forIndex-topItemIndex)*LIST_ITEM_HEIGHT+topItemSpare;
  const positionFromOrigin = Math.floor(Math.abs(yRadius - positionFromEllipseTop));

  const angle   = Math.asin(positionFromOrigin / yRadius);

  if (orientation === 'Left') {
    marginLeft  = 0;
    marginRight = ((xRadius * Math.cos(angle)))-LIST_ITEM_HEIGHT;
    alignSelf = 'flex-end';
  }
  else if (orientation === 'Right') {
    marginLeft  = (xRadius * Math.cos(angle))-LIST_ITEM_HEIGHT;
    marginRight = 0;
    alignSelf = 'flex-start';
  }
}

Answer 3

React-native的FlatList组件有一个名为onLayout的道具。您可以使用此道具获取组件在屏幕上的位置。

<强> onLayout

使用以下命令在安装和布局更改时调用：
{nativeEvent: { layout: {x, y, width, height}}}
计算布局后立即触发此事件，但是新的布局可能还没有反映在屏幕上收到事件，尤其是布局动画时进展。

Flatlist可见位置

3 个答案: