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

Question

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

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

标签： javascriptreact-nativescrollview

Answer 1

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