此问题通常是由底部选项卡的自定义样式引起的。您可以通过将页脚组件属性添加到最后一个flatList来修复此问题。

//The total height including the bottom tab height and the space
   let bottomMargin = 110

 <SafeAreaView style={{flex:1}}/>
//Top FLatList
<View>
  <FlatList
     showsHorizontalScrollIndicator={false}
     horizontal
     data={articles}
     ...
  />
 </View>
//Middle FLatList
<View>
  <FlatList
     showsHorizontalScrollIndicator={false}
     horizontal
     data={options}
     ...
  />
 </View>
 //Bottom FLatList
 <View>
  <FlatList
     data={articles}
     ListFooterComponent={()=>(
      <FooterComponent/>
     )}
     ...
  />
 </View>
</SafeAreaView>

  const FooterComponent = () => {

    return (
        <View style={{marginBottom: bottomMargin}} />
    )
  }

卷动整页

要滚动整个页面，请将上述代码作为Header组件从第三个平面列表传递到第三个平面列表，如下所示：

<SafeAreaView style={{flex:1}}/>
//Top FLatList

 //Bottom FLatList
 <View>
  <FlatList
     data={articles}
     ListHeaderComponent={()=>(
      <HeaderComponent/>
     )}
     ...
  />
 </View>
</SafeAreaView>

  const HeaderComponent= () => {
    return (
      <View>
        <FlatList
         showsHorizontalScrollIndicator={false}
         horizontal
         data={articles}
          />

         <FlatList
         showsHorizontalScrollIndicator={false}
         horizontal
         data={options}
         />
     </View>
    )
  }