You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React-Native重载时Header与BottomTabNavigator高度翻倍问题求助

问题:React Native重载时BottomTabBar与Header高度临时异常(仅Android 10以下版本)
  • 应用重载过程中,BottomTabBar及Header高度会异常增高,待重载完成后恢复正常,每次重载都会触发该问题
  • 已尝试以下操作,问题仍未解决:
    • 将React-Native升级至0.72.3
    • 更新react-navigation依赖
    • 创建空白测试项目复现,问题依旧存在
  • 仅在Android 10以下版本的模拟器中测试出该问题
  • 截图对比:左侧为重载时状态,右侧为重载完成后状态

App.tsx

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

重载时BottomTabBar与Header高度异常对比

内容的提问来源于stack exchange,提问作者Quantal

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.13 12:10:03