React Native中如何为ScrollView内的View设置动态高度

问题根源 #

你手动计算高度失效，大概率是没算上元素的padding、margin或者组件渲染的额外高度，而且其实完全不需要手动设置内部View的高度——ScrollView本身就能自动识别内容高度，问题出在布局约束没做好。

具体解决方案 #

• 方案1：移除多余的内部View
  ScrollView可以直接包裹多个子元素，没必要套一层View，简化代码后ScrollView会自动处理内容高度：

<ScrollView>
  <Text1/> 
  <Text2/>
  ... 
</ScrollView>

• 方案2：保留内部View但修正布局
  如果必须保留内部View，给View设置flexGrow: 1让它自适应内容，同时确保ScrollView的父容器有明确的高度（比如占满屏幕高度）：

<View style={{ height: '100%' }}>
  <ScrollView>
    <View style={{ flexGrow: 1 }}>
      <Text1/> 
      <Text2/>
      ... 
    </View>
  </ScrollView>
</View>

• 方案3：改用FlatList（更推荐）
  当内容元素数量动态变化时，FlatList比ScrollView性能更好，还能自动处理滚动逻辑，不需要纠结高度问题：

<FlatList
  data={你的文本数据数组}
  renderItem={({ item }) => <你的文本组件 text={item} />}
  keyExtractor={(item, index) => index.toString()}
/>

内容的提问来源于stack exchange，提问作者ciao_