React Native 底部标签栏在每次加载时跳转答案

【问题标题】：React Native Bottom tab bar jump on every loadReact Native 底部标签栏在每次加载时跳转
【发布时间】：2021-06-28 20:04:21
【问题描述】：

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

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>
  );
};

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

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation react-navigation-bottom-tab

【解决方案1】：

我遇到了同样的问题，在我的情况下，我在不同的屏幕中使用不同的道具使用自定义状态栏。问题是我没有在所有屏幕状态栏中使用半透明道具。在所有屏幕状态栏中使用半透明解决了该问题。如果它解决了你的问题，请给我一个大拇指。

【讨论】：

【解决方案2】：

我使用 MaterialCommunityIcons 作为标签图标，所以，我解决了这个问题

useLayoutEffect(() => {
  async function loadIcons() {
    setIsLoading(true);
    await MaterialCommunityIcons.loadFont();
    setIsLoading(false);
  }
  loadIcons();
}, []);

if (isLoading) {
  return <></>;
}

为什么要使用LayouEffect？签名与 useEffect 相同，但它在所有 DOM 突变后同步触发。使用它从 DOM 中读取布局并同步重新渲染。在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。 read more

【讨论】：