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将所有内容包装在SafeAreaProviderand中SafeAreaView
2. 指定safeAreaInsets所有方向的 为 0：

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

3. 如果您要在选项卡屏幕中创建堆栈，请safeAreaInsets为堆栈导航器提供相同的内容。

通过这些更改，我不再看到标签栏高度跳跃，也不再看到堆栈标题跳跃。基本上这个解决方法为我解决了所有用户界面故障。