Expo Go安卓端BottomNavigation嵌套SafeAreaView不显示的解决方法

问题根源是SafeAreaView默认会为底部添加安全区域内边距，而react-native-paper的BottomNavigation本身已经做了底部安全区域适配，嵌套后两者布局规则冲突，导致导航栏被挤出可视区域。

下面是两种可行的解决方案：

方案1：让SafeAreaView只处理顶部及左右安全区域 #

直接给SafeAreaView指定edges属性，排除底部区域，让BottomNavigation自己适配底部安全区：

import { SafeAreaView } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import { useState } from 'react';
import { View, Text } from 'react-native';

function App() {
  const [index, setIndex] = useState(0);
  const routes = [
    { key: 'home', title: '首页', icon: 'home' },
    { key: 'settings', title: '设置', icon: 'cog' },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }} edges={['top', 'left', 'right']}>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={BottomNavigation.SceneMap({
          home: () => <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>首页</Text></View>,
          settings: () => <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>设置</Text></View>,
        })}
      />
    </SafeAreaView>
  );
}

方案2：强制BottomNavigation固定在SafeAreaView底部 #

如果需要SafeAreaView覆盖整个屏幕（包括底部），可以给BottomNavigation设置绝对定位，强制它贴在SafeAreaView的底部：

import { SafeAreaView, StyleSheet } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import { useState } from 'react';
import { View, Text } from 'react-native';

function App() {
  const [index, setIndex] = useState(0);
  const routes = [
    { key: 'home', title: '首页', icon: 'home' },
    { key: 'settings', title: '设置', icon: 'cog' },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <BottomNavigation
        style={styles.bottomNav}
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={BottomNavigation.SceneMap({
          home: () => <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>首页</Text></View>,
          settings: () => <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>设置</Text></View>,
        })}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  bottomNav: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

依赖版本参考（兼容示例） #

确保package.json中相关依赖版本适配：

{
  "dependencies": {
    "expo": "~49.0.15",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-paper": "^5.11.1",
    "react-native-safe-area-context": "4.6.3"
  }
}

效果说明 #

• 错误状态：[SafeAreaView嵌套后BottomNavigation消失的截图]
• 修复后：[BottomNavigation正常显示的截图]

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