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

Posted 2023-02-22

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

【英文标题】：React Native header / bottom tabbar jumping on first app load

【发布时间】：2020-10-23 23:49:45

【问题描述】：

我有一个仅包含导航包的应用程序。在 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>
    );

【问题讨论】：

你好@Basar Sen，你能用 RN 0.61.5 版本试试吗？它不应该那样跳跃。另外，请在真机上试用。

@FreakyCoder 谢谢。我试过你的建议。但它仍然是一样的。这是一个奇怪的错误:)

让我测试一下:)

@FreakyCoder 我试过这个组合。现在它可以正常工作了:)。 “react”：“16.11.0”，“react-native”：“0.62.2”，“@react-navigation/bottom-tabs”：“^5.2.5”，“@react-navigation/native”：“ ^5.1.4", "@react-navigation/stack": "^5.2.9", "@react-native-community/masked-view": "^0.1.7", "react-native-gesture-handler ": "^1.6.1", "react-native-reanimated": "^1.7.1", "react-native-screens": "^2.4.0", "react-native-safe-area-context" : "^0.7.3"

我遇到了同样的问题 "@react-navigation/bottom-tabs": "^5.5.1",

【参考方案1】：

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

【讨论】：

我还需要重置 safeAreaInsets。参考我更新的答案：***.com/a/67922977/492325

【参考方案2】：

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

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

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

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

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

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

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

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

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

【讨论】：

刚刚为我节省了很多时间来解决这个问题......

【参考方案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),
    ,
  
  
...

希望对你有帮助:)

【参考方案4】：

给这个

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

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