React Native 标题/底部标签栏在第一个应用程序加载时跳跃

Question

我有一个仅包含导航包的应用程序。在 IOS 上，一切都很好，但在 Android 上，标题和/或底部标签栏似乎在跳跃（可能重新计算它们的位置）。仅当我使用导航组件并且仅当应用程序刚刚启动时才会发生这种情况。有没有人遇到同样的问题？

提前致谢。

---

包：

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6.1",
"@react-navigation/stack": "^5.6.2",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.9.0",
"react-native-safe-area-context": "^3.0.7",
"react-native-screens": "^2.9.0"

这是整个应用程序：

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

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

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

function SettingsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
    return (
        <HomeStack.Navigator>
            <HomeStack.Screen name="Home" component={HomeScreen} />
            <HomeStack.Screen name="Details" component={DetailsScreen} />
        </HomeStack.Navigator>
    );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
            <SettingsStack.Screen name="Details" component={DetailsScreen} />
        </SettingsStack.Navigator>
    );
}

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Home" component={HomeStackScreen} />
                <Tab.Screen name="Settings" component={SettingsStackScreen} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

Answer 1

我使用SafeAreaProvider 解决了这个问题。您应该在应用根组件中添加SafeAreaProvider，并使用SafeAreaView 作为页面的根组件。还要检查 SafeAreaView 的导入语句，react-native 也有 SafeAreaView 但该组件仅支持 iOS 10+。

Answer 2

我为这个确切的错误苦苦挣扎了一段时间。我终于能够找到解决方法。

似乎所有 ReactNavigation 导航器（例如 Tab 和 Stack）默认情况下都会容纳安全区域。此页面中提到了这一点：https://reactnavigation.org/docs/bottom-tab-navigator/

默认情况下会自动检测设备的安全区域插入

所以我们看到的行为似乎是由于这个原因。目前尚不清楚为什么 ReactNavigation 有错误的“安全区域”逻辑，但解决方法是禁用它。

解决方法类似于@Arun Girivasan 的建议，但有几个额外步骤：

1. 使用react-native-safe-area-context 将所有内容包装在SafeAreaProvider 和SafeAreaView 中
2. 将所有方向的 safeAreaInsets 指定为 0：

<Tab.Navigator
  initialRouteName="AppDashboard"
  tabBarOptions={{
    safeAreaInsets: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    }
  }}
>

1. 如果您在标签屏幕中创建堆栈，请为堆栈导航器提供相同的safeAreaInsets。

通过这些更改，我不再看到标签栏高度跳跃并且我不再看到堆栈标题跳跃。基本上，这种解决方法为我解决了所有 UI 故障。

Answer 3

我在@react-navigation/bottom-tabs 上也发生了同样的事情，我刚刚从“tabstyle”中删除了 paddingBottom 和 padding top 并粘贴到“style”中，这解决了问题

之前：

  tabBarOptions={{
    keyboardHidesTabBar: true,
    activeTintColor: COLOR.white,

    style: {
      backgroundColor: COLOR.primary,
      height: responsiveHeight(7),
    },
    tabStyle: {
      paddingBottom: responsiveHeight(0.5),
      paddingTop: responsiveHeight(0.5),
    },
  }}

之后：

  tabBarOptions={{
    keyboardHidesTabBar: true,
    activeTintColor: COLOR.white,
    style: {
      backgroundColor: COLOR.primary,
      height: responsiveHeight(7),
      paddingBottom: responsiveHeight(0.5),
      paddingTop: responsiveHeight(0.5),
    },
  
  }}
...

希望对你有帮助:)

Answer 4

给这个

navigationOptions: {
        headerShown: true,
        safeAreaInsets: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        },
      },

如果你使用的是 react-navigation 4x