如何消除react-navigation/bottom-tabs带来的额外滚动问题

我使用React Native和react-navigation/bottom-tabs制作了一个简单的测试应用，但添加底部标签栏后出现了一处小的额外滚动（见下图）。请问有什么方法可以消除这个问题？

代码示例 #

App.tsx:

import React from 'react';  
import Page1 from './Page1';
import { NavigationContainer } from '@react-navigation/native';
import Page2 from './Page2';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={Page1} />
        <Tab.Screen name="Page2" component={Page2} />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

export default App

Page1.tsx:

import React from 'react';
import { Text } from "@react-native-material/core";

const Page1 = () => {
    return <Text>
        I am Page1 ! !!!
    </Text>
}

export default Page1

Page2.tsx:

import React from 'react';
import { Text } from "@react-native-material/core"

const Page2 = () => {
    return <Text>
        Page 2 is me !!!
    </Text>
}

export default Page2

出现额外滚动的核心原因是页面内容未正确适配底部标签栏高度，导致整体内容超出屏幕可视区域，可通过以下方法解决：

• 用SafeAreaView包裹页面内容
  利用React Native原生的SafeAreaView（或@react-native-material/core提供的同组件）包裹页面内容，它会自动避开底部标签栏和顶部状态栏的区域，避免内容被遮挡或撑出滚动：

  // 修改Page1.tsx示例
  import React from 'react';
  import { Text, SafeAreaView } from "react-native";
  
  const Page1 = () => {
      return (
          <SafeAreaView style={{ flex: 1 }}>
              <Text>I am Page1 ! !!!</Text>
          </SafeAreaView>
      )
  }
  
  export default Page1
  

• 给Tab.Navigator设置屏幕选项
  在Tab.Navigator的screenOptions中强制关闭底部安全区域适配，让页面自行处理布局：

  // 修改App.tsx中的Tab.Navigator
  <Tab.Navigator
      screenOptions={{
          safeAreaInsets: { bottom: 0 }
      }}
  >
      <Tab.Screen name="Page1" component={Page1} />
      <Tab.Screen name="Page2" component={Page2} />
  </Tab.Navigator>
  

• 检查组件默认内边距
  部分UI库组件会自带默认内边距，若页面使用了这类组件，可检查并移除多余的paddingBottom或marginBottom样式，避免内容被撑高。

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