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

Javascript React Native-动态添加元素后滚动到元素,javascript,react-native,scrollview,Javascript,React Native,Scrollview,我动态地添加/删除元素,当添加的元素不在视图端口中时,我希望通过滚动到添加的元素来将其导入视图端口 但是我不能让它工作。我正在使用measure函数获取坐标,然后使用scrollTo函数滚动到元素 下面是具有滚动视图的父组件 const scrollTo = (config) => { scrollElRef.current.scrollTo(config); }; return ( <ScrollView style={styles.container

我动态地添加/删除元素,当添加的元素不在视图端口中时,我希望通过滚动到添加的元素来将其导入视图端口

但是我不能让它工作。我正在使用
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>
  );
}
constscrollto=(配置)=>{
ScrollRef.current.scrollTo(配置);
};
返回(
作为发明家和准建筑学者的建筑设计
必须解释人生的真谛
他们坐在一个小房间里,一个大房间里
多洛雷斯·厄斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎斯·奎
这是我的责任,是我的责任,是我的责任,是我的责任,是我的责任。

{items.map((i)=>

对于ScrollView,您需要为其子组件提供特定的高度,以使其正常工作。而不是动态,只需提供特定的高度即可。希望之后可以正常工作!

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

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