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

【问题标题】：React Native - Scroll in to element after dynamically adding the elementReact Native - 动态添加元素后滚动到元素
【发布时间】：2020-06-27 02:14:53
【问题描述】：

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

但是我无法让它工作。我使用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>
  );
}

这是添加/删除元素并将坐标发送到父视图的子组件

  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

【问题讨论】：

标签： javascript react-native scrollview

【解决方案1】：

对于 ScrollView，您需要为其子组件提供特定的高度以使其工作。而不是动态的，只需提供特定的高度。希望它在那之后工作！

【讨论】：

【解决方案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);
  };

【讨论】：