React Native顶部标签导航器底部出现异常黑块问题求助

问题：标签导航器仅覆盖屏幕90%区域，底部留有黑色空白块。切换标签后返回主屏幕，该黑块会消失。

用户代码：

const Tab = createMaterialTopTabNavigator();

<View
  style={{
    backgroundColor: "black",
    flex: 1,
    paddingTop: paddingTopForAndroid,
  }}
>
<Tab.Navigator
  screenOptions={({ route }) => screenOptions(route)}
  keyboardDismissMode="auto"
  style={{ flex: 1 }}
  >
   <Tab.Screen name="Explore" component={ExplorePosts} />
   <Tab.Screen name="Feed" component={FeedNavigator} />
  </Tab.Navigator>
</View>

解决方案 #

• 检查嵌套导航器布局：确保FeedNavigator的根容器设置flex:1，嵌套导航器初始渲染时可能未正确占满父容器高度，切换标签后重新渲染才修正。
• 简化外层布局：移除包裹导航器的外层View，直接将背景色和内边距配置到Tab.Navigator中，避免层级布局冲突：

  <Tab.Navigator
    screenOptions={({ route }) => ({
      ...screenOptions(route),
      paddingTop: paddingTopForAndroid,
    })}
    keyboardDismissMode="auto"
    style={{ flex: 1, backgroundColor: "black" }}
  >
    <Tab.Screen name="Explore" component={ExplorePosts} />
    <Tab.Screen name="Feed" component={FeedNavigator} />
  </Tab.Navigator>
  

• 强制重渲染修正高度：通过key触发导航器挂载后重绘，解决初始高度计算异常：

  const [forceRender, setForceRender] = useState(false);
  
  useEffect(() => {
    setTimeout(() => setForceRender(true), 100);
  }, []);
  
  return (
    <View
      style={{
        backgroundColor: "black",
        flex: 1,
        paddingTop: paddingTopForAndroid,
      }}
    >
      <Tab.Navigator
        key={forceRender}
        screenOptions={({ route }) => screenOptions(route)}
        keyboardDismissMode="auto"
        style={{ flex: 1 }}
      >
        <Tab.Screen name="Explore" component={ExplorePosts} />
        <Tab.Screen name="Feed" component={FeedNavigator} />
      </Tab.Navigator>
    </View>
  );
  

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