React Native Tab View底部空白SafeAreaView适配Bug排查

底部多余空白和TabView本身布局无关，是SafeAreaView默认行为导致的：

• 未做属性限制的SafeAreaView会自动为顶部状态栏、底部系统手势区域（iOS Home指示条、安卓全面屏手势导航区）添加自适应内边距
• 现有代码重复添加了顶部偏移marginTop: StatusBar.currentHeight，同时没有处理SafeAreaView自动添加的底部内边距，最终形成底部空白
• 移除SafeAreaView后底部空白消失、顶部内容和状态栏重叠的现象，也能印证这个判断

1. 删除styles.container中多余的marginTop: StatusBar.currentHeight属性，SafeAreaView本身已经完成顶部状态栏避让，重复添加偏移会额外占用布局高度
2. 删除SafeAreaView样式中多余的justifyContent: 'center'属性，该属性会影响TabView的垂直拉伸逻辑
3. 给SafeAreaView添加edges属性，限制其仅处理顶部安全区避让，不自动添加底部内边距
4. 给TabView设置flex:1让它占满SafeAreaView内的剩余可用空间

修复后的完整代码：

import {
  View,
  StyleSheet,
  Dimensions,
  StatusBar,
  SafeAreaView,
  Text,
} from 'react-native';
import React from 'react';
import {TabView, SceneMap} from 'react-native-tab-view';
import {Theme} from '../../../util/styles';

const FirstRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#ff4081'}]}>
    <Text>sdssd</Text>
  </View>
);

const SecondRoute = () => (
  <View style={[styles.scene, {backgroundColor: '#673ab7'}]} />
);

const initialLayout = {width: Dimensions.get('window').width};

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
});

const TestHomTab = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
  ]);

  return (
    <SafeAreaView
      edges={['top']}
      style={{
        flex: 1,
        backgroundColor: Theme.palette.DUSTYROSE,
      }}>
      <StatusBar
        translucent
        barStyle="dark-content"
        backgroundColor="transparent"
      />

      <TabView
        navigationState={{index, routes}}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={initialLayout}
        style={{flex: 1}}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

export default TestHomTab;

如果业务需要底部Tab栏避让系统手势区域，不要关闭SafeAreaView的底部边距，而是通过renderTabBar自定义Tab栏样式，单独给Tab栏容器添加对应底部内边距即可，不要让整个内容区被SafeAreaView的底部padding挤压。

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