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

Question

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

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

• MySubComponent,
• Text
• Image 组件

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

为了实现这一点，我的计划是禁用 ScrollView 的 automaticallyAdjustContentInsets，正如您从下面的代码 sn-p 中看到的那样。然后，有一个状态变量来保存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>)
}

Answer 1

将<ScrollView> 中的所有内容包装在<View> 中。然后使用 onLayout 获取该父 View 的高度。

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

...

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

然后您可以根据需要使用scrollLayoutHeight在运行时设置高度。