React Native FlatList嵌套ScrollView报错，基于Native Base求滚动解决方案

你遇到的核心问题是Native Base的<Content>组件内部已经封装了ScrollView，把FlatList放在里面就触发了React Native禁止ScrollView嵌套的规则，导致报错。下面针对你的两段代码分别给出解决方案，保证内容正常滚动且无报错：

针对代码1的解决方案 #

原代码里的<Content>是问题根源，因为它自带滚动容器。我们可以把顶部的<View>内容作为FlatList的头部，让整个内容都由FlatList来承载，彻底避免嵌套ScrollView：

<Container>
  <FlatList
    {...props}
    ListHeaderComponent={
      // 这里放置你原来<Content>内的那个<View>内容
      <View> *** </View>
    }
    style={{ flex: 1 }}
  />
</Container>

修改后，顶部View会和FlatList的列表项一起滚动，完全符合React Native的滚动容器规则，不会再出现报错。

如果一定要保留<Content>（比如依赖它的Native Base特性），可以给<Content>添加disableScroll属性禁用其滚动功能，让FlatList独立处理滚动：

<Container>
  <Content disableScroll>
    <View> *** </View>
    <FlatList {...props} style={{ flex: 1 }} />
  </Content>
</Container>

不过更推荐第一种方案，结构更简洁合理。

针对代码2的解决方案 #

代码2是普通View嵌套，本身没有ScrollView，但如果顶部内容过长或整体页面高度超出屏幕，单独的FlatList只能滚动自身列表项，顶部内容无法跟随滚动。我们同样可以借助FlatList的ListHeaderComponent整合所有内容：

<View style={{ flex: 1 }}>
  <FlatList
    {...props}
    ListHeaderComponent={
      // 这里放置你原来嵌套的两层<View>内容
      <View>
        <View> *** </View>
      </View>
    }
    style={{ flex: 1 }}
  />
</View>

这样整个页面（头部内容+FlatList列表）会作为一个整体滚动，既不会触发嵌套ScrollView的报错，也能实现全页面滚动的需求。

如果需要顶部内容固定、仅FlatList滚动的效果，可以给顶部View设置固定定位，再给FlatList添加对应的上边距避开固定内容：

<View style={{ flex: 1 }}>
  {/* 顶部固定内容 */}
  <View style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 1 }}>
    <View> *** </View>
  </View>
  {/* FlatList设置marginTop避开顶部固定区域 */}
  <FlatList {...props} style={{ flex: 1, marginTop: /* 顶部内容的高度值 */ }} />
</View>

总结一下，核心思路就是避免ScrollView嵌套，要么利用FlatList的头部组件整合滚动内容，要么禁用外层滚动容器的滚动功能，让FlatList单独负责滚动逻辑。

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