ScrollView与绝对定位组件搭配时滚动失效问题求助

嘿，我来帮你分析下问题根源，再给你两个实用的解决方案：

问题出在哪？ #

你碰到的这个矛盾其实是ScrollView的高度计算逻辑导致的：

• 不给contentContainerStyle加flex:1时，ScrollView的内容容器只会包裹非绝对定位的元素（也就是那个Image的高度），而绝对定位的overlap组件脱离了正常布局流，它的高度不会被算进内容容器里，所以超出屏幕的部分就显示不全。
• 加了flex:1后，内容容器会直接撑满父容器的可用高度，ScrollView觉得内容没超出容器，自然就不会触发滚动了。

解决方案 #

这里有两种靠谱的思路，你可以根据自己的需求选：

方案1：用负margin+zIndex替代绝对定位（首推！）

这种方式既能实现组件重叠的效果，又能让ScrollView正常计算内容总高度，完美支持滚动：

<ScrollView>
  <View style={styles.container}>
    <Image 
      source={{ uri: 'https://facebook.github.io/react/logo-og.png', cache: 'only-if-cached', }} 
      style={{width: 400, height: 100}} 
    />
    <View style={styles.overlap}>
      <Text>Event1</Text>
      <Text>Event2</Text>
      <Text>Event3</Text>
      <Text>Event4</Text>
      <Text>Event5</Text>
      <Text>Event6</Text>
      <Text>Event7</Text>
      <View style={{ backgroundColor: 'orange', height: 800, width: 500 }}/>
      <View style={{ backgroundColor: 'green', height: 800, width: 500 }}/>
    </View>
  </View>
</ScrollView>

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  overlap: {
    width: 300,
    backgroundColor: 'red',
    borderColor: 'red',
    borderWidth: 1,
    zIndex: 9999,
    // 用负margin实现向上重叠，替代绝对定位的top值
    marginTop: -20,
    alignSelf: 'center',
  },
});

改完之后，overlap组件依然会和上方的Image重叠，而且它的高度会被ScrollView正确识别，内容超出屏幕时就能正常滚动啦。

方案2：保留绝对定位，手动设置内容容器最小高度

如果你因为特殊需求必须用绝对定位，可以给ScrollView的contentContainerStyle设置minHeight，值要足够大，能容纳下绝对定位组件的总高度加上它的偏移量，让ScrollView知道内容够长需要滚动：

<ScrollView contentContainerStyle={{ minHeight: 1700 }}> {/* 这里的数值是800+800+80（top偏移）+20（预留空间） */}
  <View style={styles.container}>
    <Image 
      source={{ uri: 'https://facebook.github.io/react/logo-og.png', cache: 'only-if-cached', }} 
      style={{width: 400, height: 100}} 
    />
    <View style={styles.overlap}>
      {/* 你的内容 */}
    </View>
  </View>
</ScrollView>

这个方法的缺点是需要手动计算高度，要是内容是动态变化的就不太灵活，适合内容高度固定的场景。

总结 #

优先选方案1，它更贴合React Native的布局逻辑，还能自适应内容高度变化；如果实在必须用绝对定位，再考虑方案2。

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