在运行时动态调整滚动视图高度

大佬教程收集整理的这篇文章主要介绍了在运行时动态调整滚动视图高度，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在运行时动态调整滚动视图高度？

我正在开发一个 react-native 项目。

我在 ScrollVIEw 中有一个 MyComponent，ScrollVIEw 的内容包括：

• a MySubComponent,
• a Text
• 一个 Image 组件

上述组件的所有内容/数据都具有动态长度或高度。因此，我想在运行时动态调整 ScrollVIEw 的内容高度。

为了实现这一点，我的计划是禁用 automaticallyAdjustContentInsets 的 ScrollVIEw，您可以从下面的代码片段中看到。然后，有一个状态变量来保存 contentInsetBottom 的最新值。但我不确定如何计算子组件的高度，以便我可以调用 setContentInsetBottom(totalHeight) 来更新我的 ScrollVIEw 的内容高度。

（如果我知道如何计算 ScrollVIEw 的每个子组件的高度，我很确定我的计划会奏效。）

谁能指导我一下？

const MyComponent = ({myText,image}) => {

   // I have a state of the contentInsetBottom for the ScrollVIEw
   const [contentInsetBottom,setContentInsetBottom] = useState(0);

   // how can I get the height of each children component,sum them up & call setContentInsetBottom(totalHeight) here ?

   return (
   <ScrollVIEw
        automaticallyAdjustContentInsets={false}
        contentInset={{top: 0,bottom: contentInsetBottom}}
        style={styles.scrollVIEw}
        contentContainerStyle={styles.contentContainer}>

        <MySubComponent />
        <Text>{myText}</Text>
        <Image source={{uri: image?.uri}}>
   </ScrollVIEw>)
}

解决方法

  const handleScrollContentLayout = (e) => {
    const { height } = e.nativeEvent.layout
    setScrollLayoutHeight(height)
  }

...

<View onLayout={handleScrollContentLayout}>
{ /* scrollView content... */ }
</View>

大佬总结

以上是大佬教程为你收集整理的在运行时动态调整滚动视图高度全部内容，希望文章能够帮你解决在运行时动态调整滚动视图高度所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。