使用BottomTabNavigator切换屏幕时，反应导航屏幕跳动

Question

我从reactnavigation v5使用BottomTabNavigator。问题是，从呈现选项元素的角度将页面从底部选项卡导航器切换到比其他页面重的页面时，屏幕会跳动/抖动一秒钟以调整大小。我注意到它确实出现在两个平台上，但在android中更明显。我已经记录了屏幕来演示该问题。关于解决该错误的任何想法都很棒。

https://www.youtube.com/watch?v=U6OfVeNafMI （切换到主屏幕时检查一下）

这就是我使用bottomTabNavigator的方式：

const AppNavigator = (props) => {
const { language } = props;

return (
    <Tab.Navigator
        tabBarOptions={{
            activeBackgroundColor: data.colors.superdark_blue,
            inactiveBackgroundColor: data.colors.dark_blue,
            activeTintColor: data.colors.nice_orange,
            inactiveTintColor: "#c9c9c9",
            tabStyle: {
                zIndex: 100,
            },
            labelPosition: "below-icon",
            tabStyle: {
                justifyContent: "center",
                paddingTop: 5,
                paddingBottom: 5,
                borderTopWidth: 1,
                borderTopColor: data.colors.dark_blue,
                alignItems: "center",
            },
            labelStyle: {
                textAlign: "center",
                alignItems: "center",
                fontSize: language === "FA" ? 12 : 11,
                fontFamily: language === "FA" ? "Yekan" : "Heebo",
            },
            style: {
                backgroundColor: data.colors.dark_blue,
            }
        }}
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                if (route.name === "HOME") {
                    return (
                        <Feather name={"home"} size={17} color={color} />
                    );
                } else if (route.name === "OFFERS") {
                    return (
                        <AntDesign
                            name={"notification"}
                            size={17}
                            color={color}
                        />
                    );
                } else if (route.name === "SAVED") {
                    return (
                        <Feather
                            name={"bookmark"}
                            size={17}
                            color={color}
                        />
                    );
                } else if (route.name === "CONTACT") {
                    return (
                        <Feather
                            name={"settings"}
                            size={17}
                            color={color}
                        />
                    );
                }
            },
        })}
    >
        <Tab.Screen
            name="HOME"
            component={HomeStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].home,
            }}
        />
        <Tab.Screen
            name="SAVED"
            component={FavoritesStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].bookmarks,
            }}
        />
        <Tab.Screen
            name="OFFERS"
            component={MagazineStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].offers,
            }}
        />

        <Tab.Screen
            name="CONTACT"
            component={ContactStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].contact,
            }}
        />
    </Tab.Navigator>
);

};

您可能会从它们的名称中猜出的每个选项卡屏幕组件都是带有几页的stackNavigator，而AppNavigator则包装在App.js的NavigationContainer中