React Native+Expo底部TabBar遮挡背景图，图片截断问题求助

方案一：给页面容器添加底部内边距（适配SafeArea） #

如果TabBar高度和设备底部安全区高度匹配，直接用react-native-safe-area-context获取底部间距，给页面容器加上内边距，让背景图自动停在TabBar上方：

import { View, ImageBackground } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

function HomeScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, paddingBottom: insets.bottom }}>
      <ImageBackground
        source={require('./assets/bg.png')}
        style={{ flex: 1, width: '100%', height: '100%' }}
      >
        {/* 页面内容 */}
      </ImageBackground>
    </View>
  );
}

要是TabBar有自定义固定高度，直接把insets.bottom换成对应的数值（比如60）即可。

方案二：设置透明TabBar+页面内容留底 #

把TabBar设为绝对定位并透明，让页面内容能延伸到屏幕底部，再通过内边距避开TabBar区域，视觉上背景图就贴在TabBar下方：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: 'rgba(255,255,255,0.8)', // 半透明或全透明
          borderTopWidth: 0,
          height: 60, // 自定义TabBar高度
        },
      }}
    >
      {/* 你的页面路由 */}
      <Tab.Screen name="Home" component={HomeScreen} />
    </Tab.Navigator>
  );
}

然后在HomeScreen里，给ImageBackground的容器加上paddingBottom: 60（和TabBar高度一致）。

方案三：绝对定位背景图时手动调整bottom值 #

如果背景图是绝对定位的，直接把它的bottom值设为TabBar的高度，而不是0，这样图片底部就会刚好停在TabBar上方：

<ImageBackground
  source={require('./assets/bg.png')}
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 60, // TabBar高度
    width: '100%',
    height: '100%',
  }}
>
  {/* 页面内容 */}
</ImageBackground>

注意事项 #

• 别直接给ImageBackground加marginBottom，因为绝对定位元素的margin不会影响它的位置，得调整bottom或者给父容器加padding。
• 如果用了ScrollView，要给contentContainerStyle加paddingBottom，而不是给ScrollView本身加padding。

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