React Native - 动态添加元素后滚动到元素

Question

我动态 adding/removing 元素，当添加的元素不在视口中时，我想通过滚动到添加的元素将其放入视口。

但是我无法让它工作。我正在使用 measure 函数获取坐标，然后使用 scrollTo 函数滚动到元素。

这里是带滚动视图的父组件

  const scrollTo = (config) => {
    scrollElRef.current.scrollTo(config);
  };

  return (
    <ScrollView style={styles.container} ref={scrollElRef}>
      <Text style={styles.paragraph}>
       aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
        dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
        est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
      </Text>
      <Card>
        {items.map((i) => <AssetExample key={i} scrollTo={(c) => scrollTo(c)}/>)}
      </Card>
    </ScrollView>
  );
}

这是add/remove元素的子组件，并将坐标发送到父视图

  React.useEffect(() => {
    if(asset) {
       elRef.current.measure((x, y, w, h, pageX, pageY) => {
          const elementBottom = pageY + h;
          const isInViewport = elementBottom < height;
          if (!isInViewport) {
            scrollTo({y: pageY, animated: true});
          }
        });
    }
  }, [asset, scrollTo, height])

这是一个示例应用程序，它显示了问题。

https://snack.expo.io/@samithaf/blissful-yogurt

Answer 1

对于 ScrollView，您需要为其子组件提供特定的高度才能使其正常工作。而不是动态的，只需提供特定的 height.Hope 之后它就可以工作了！

Answer 2

由于应用程序的性质，我拥有的内容是动态的。因此我想出了一个不同的解决方案，它可以在不指定高度的情况下工作。这是我的做法，（在这里我计算了视口外的面积。

elRef.current.measure((x, y, w, h, pageX, pageY) => {
        const elementBottom = pageY + h;
        const isInViewport = elementBottom < height;
        if (!isInViewport) {
          scrollTo(elementBottom - height);
        }
      });

然后在滚动视图中监听滚动事件，当调用 scrollTo 函数时，您所要做的就是获取当前滚动位置 + 视口外的区域。希望这可以帮助任何想要在不对高度进行硬编码的情况下获得类似结果的人。

const scrollTo = (diff) => {
    scrollElRef.current.scrollTo(pageScrollY + diff);
  };

React Native - 动态添加元素后滚动到元素

React Native - Scroll in to element after dynamically adding the element

javascript

scrollview

react-native