React 导航 V6 在屏幕之间滑动时闪烁白色

Question

我正在使用反应导航V6。我有 6 个组件。但是，当我从第一个导航到第六个时：过渡会穿过所有活动组件并闪烁白色。我想删除白色闪光或将幻灯片过渡效果更改为淡入淡出。谢谢。

      <View style={{flex: 1, borderTopWidth: 1, borderTopColor: '#5656582b'}}>
        <Tab.Navigator
          initialRouteName="Tous"
          
          screenOptions={{

            tabBarScrollEnabled: true,
            tabBarIndicatorStyle: {
              backgroundColor: '#60103b',
              height: 4,
            },
            tabBarActiveTintColor: '#60103b',
            tabBarInactiveTintColor: 'black',
            tabBarLabelStyle: { fontSize: 17,color: 'black',fontWeight: "500",letterSpacing: 1},
            tabBarItemStyle: {width: 'auto', padding: 10},
            lazy:true,
            swipeEnabled:false,
            


          }          
          }
          sceneAnimationEnabled = {false}

          //animationEnabled: false}          
          >
          <Tab.Screen name="Tous" initial component={Home} />
          <Tab.Screen name="Livres" component={LivreHome} />
          <Tab.Screen name="Livres Audios" component={LivreAudio} />
          <Tab.Screen name="Podcasts" component={PodcastHome} />
          <Tab.Screen name="Magasines" component={MagasineHome} />
          <Tab.Screen name="Documents" component={DocumentHome} />
        </Tab.Navigator>
      </View>

Answer 1

首先将 包装在 NavigationContainer 中

要删除白色闪光，有一种方法可以为 NavigationContainer 提供深色主题

示例代码

import {
  NavigationContainer,
  DarkTheme,
} from '@react-navigation/native';

export default () => {
 
  return (
    <NavigationContainer theme={DarkTheme}>
      {/*Other Tab.Navigtor content*/}
    </NavigationContainer>
  );
};

Answer 2

        <NavigationContainer theme={DarkTheme} >
            
            {userDataSelect.hasOwnProperty('access_token')?
                 <MainNavigation /> : <AuthNavigation />
            }
       
        </NavigationContainer>

当我在两个连续的屏幕上导航时，例如 1 到 2 或 2 到 3，没有闪烁。但是当我从 1 导航到 5 时，我总是会看到白色的闪光，就好像导航遍历了浏览器的所有组件

Answer 3

options={{
presentation: 'transparentModal',
}}

我刚刚添加了这段代码，问题就解决了

这是我找到答案的链接：https://github.com/react-navigation/react-navigation/issues/7084#issuecomment-991623607