첫 번째 앱 로드 시 네이티브 헤더/하단 탭바 점프 반응

첫 번째 앱 로드 시 네이티브 헤더/하단 탭바 점프 반응

나는 네비게이션 패키지만 포함된 단일 어플리케이션을 가지고 있다.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>
    );
}

나는 SafeAreaProvider를 사용하여 이 문제를 해결했다.추가해야 한다.SafeAreaProvider앱 루트 구성 요소 및 사용SafeAreaView페이지의 루트 구성 요소로서.또한 다음 수입 명세서를 확인하십시오.SafeAreaView,react-native또한 가지고 있다SafeAreaView그러나 그 구성요소는 iOS 10+만 지원한다.

나는 한동안 이 정확한 벌레와 씨름하고 있었다.드디어 해결 방법을 찾을 수 있었다.

모든 ReactNavigation 네비게이터(예: Tab 및 Stack)는 기본적으로 안전 영역을 수용할 것으로 보인다.이 페이지에 언급된 내용: https://reactnavigation.org/docs/bottom-tab-navigator/

기본적으로 장치의 안전 영역 인셋이 자동으로 감지됨

그래서 우리가 보고 있는 행동은 이것 때문인 것 같다.ReactNavigation이 왜 "안전한 지역" 논리를 가지고 있는지는 분명하지 않지만, 해결책은 그것을 무력화하는 것이다.

이 해결책은 @Arun Girivasan이 제안한 것과 유사하며, 몇 가지 추가 단계를 거친다.

1. 반응-안전-지역-컨텍스트를 사용하여 모든 것을 a로 포장SafeAreaProvider그리고SafeAreaView
2. 지정:safeAreaInsets모든 방향의 경우 0이어야 함:

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

3. 탭 화면 내에 스택을 생성하는 경우 동일한 정보를 제공하십시오.safeAreaInsets스택 네비게이터용.

이러한 변경으로 인해 탭 바 높이가 더 이상 점프하는 것을 볼 수 없으며 스택 헤더가 점프하는 것도 더 이상 볼 수 없다.기본적으로 이 해결책은 나를 위한 모든 UI 결함을 해결한다.

@react-navigation/bottabs에서도 같은 일이 발생했는데, 나는 방금 패딩을 제거했고 "tabstyle"에서 패딩과 패딩 탑을 제거하고 "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),
    },
  
  }}
...

도움이 되었으면 좋겠다 :)

이것을 주다

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

리액터-리액터 4x를 사용하는 경우

참조URL: https://stackoverflow.com/questions/62712270/react-native-header-bottom-tabbar-jumping-on-first-app-load