reactjs - React Native Bottom 标签栏在每次加载时跳转

Question

我遇到了与问题完全相同的问题:

React Native header / bottom tabbar jumping on first app load

在每次加载时，底栏会不知何故上下跳动。我将根应用程序包装在 SafeAreaProvider 中，将我的屏幕包装在 SafeAreaView 中，但仍然发生同样的事情。

这是我的代码:

根应用:

const App = () => {
  return (
    <SafeAreaProvider>
      <StatusBar backgroundColor="#01497C" />
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="AuthLoadingScreen"
          screenOptions={{headerShown: false}}>
          <Stack.Screen
            name="AuthLoadingScreen"
            component={AuthLoadingScreen}
          />
          <Stack.Screen name="Home" component={Tabs} />
          <Stack.Screen name="QuizScreen" component={QuizScreen} />
          <Stack.Screen name="QuizReviewScreen" component={QuizReviewScreen} />
          <Stack.Screen name="QuizEndScreen" component={QuizEndScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

标签:

const Tabs = () => {
  const TabBarCustom = ({children, onPress}) => {
    return (
      <TouchableOpacity
        style={{top: -10, justifyContent: 'center', alignItems: 'center'}}
        onPress={onPress}
        activeOpacity={1}>
        <LinearGradient
          style={{
            width: 70,
            height: 70,
            borderRadius: 35,
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 4,
            },
            shadowOpacity: 0.3,
            shadowRadius: 4.65,

            elevation: 8,
          }}
          colors={['#01497C', '#89C2D9']}>
          {children}
        </LinearGradient>
      </TouchableOpacity>
    );
  };

  return (
    <Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        style: {
          height: 60,
        },
      }}>
      <Tab.Screen
        name="Quizzes"
        component={QuizzesScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <Ionicon
                name="apps-outline"
                color={focused ? '#89C2D9' : '#2A6F97'}
                size={30}
              />
              <Text
                style={{color: focused ? '#89C2D9' : '#2A6F97', fontSize: 13}}>
                Quizzes
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Flashcards"
        component={FlashCardsScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <Ionicon
                name="copy-outline"
                color={focused ? '#89C2D9' : '#2A6F97'}
                size={30}
              />
              <Text
                style={{color: focused ? '#89C2D9' : '#2A6F97', fontSize: 13}}>
                Flashcards
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Import"
        component={QuizzesScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <Icon
                name="plus"
                color={focused ? '#A9D6E5' : 'white'}
                size={42}
              />
            </View>
          ),
          tabBarButton: props => <TabBarCustom {...props} />,
        }}
      />
      <Tab.Screen
        name="Account"
        component={QuizzesScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <Ionicon
                name="person-outline"
                color={focused ? '#89C2D9' : '#2A6F97'}
                size={30}
              />
              <Text
                style={{color: focused ? '#89C2D9' : '#2A6F97', fontSize: 13}}>
                Account
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="About"
        component={QuizzesScreen}
        options={{
          tabBarIcon: ({focused}) => (
            <View style={{alignItems: 'center', justifyContent: 'center'}}>
              <Ionicon
                name="search"
                color={focused ? '#89C2D9' : '#2A6F97'}
                size={30}
              />
              <Text
                style={{color: focused ? '#89C2D9' : '#2A6F97', fontSize: 13}}>
                Search
              </Text>
            </View>
          ),
        }}
      />
    </Tab.Navigator>
  );
};

每次加载选项卡时都会出现此问题。

Answer 1

我遇到了同样的问题，在我的例子中，我在不同的屏幕上使用了自定义状态栏和不同的 Prop 。问题是我没有在所有屏幕状态栏中使用半透明 Prop 。在所有屏幕 StatusBar 中使用半透明解决了这个问题。如果它解决了你的问题，请给我一个大拇指。