Fond blanc clignotant lors de la commutation des écrans - réacteur-navigation v5

Question

Je migre une version du projet RN 4 à 5.

Lors de la commutation des écrans, il y avait un problème avec un fond blanc clignotant. Dans V4, cela a été résolu par le réglage cardStyle: { backgroundColor: material.containerBgColor } Dans les options StackNavigation.

Cependant, en V5, je suis incapable de le réparer avec la même approche:

<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>

Le flash blanc est revenu. Toute idée de comment résoudre ce problème? Merci.

Mise à jour: La structure de la navigation peut être importante:

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

Aller de la projection à Screene fait le problème clignotant. Je ne suis pas sûr des autres écrans car ils ne font pas de demande de réseau/async.

Answer 1

J'ai résolu la question en désactivant le scénariolimationEnabled de l'onglet Navigator.

<Tab.Navigator
  sceneAnimationEnabled={false}>
  {...}
</Tab.Navigator>

Answer 2

const App = () => (
  <View style={styles.appStyle}>
     <Navigation />
  </View>
);

const styles = StyleSheet.create({
  appStyle: { flex: 1, backgroundColor: "#000" }
});

Answer 3

J'ai résolu ceci en définissant lazy={false} dans le <Tabs.Navigator> Composant:

<Tabs.Navigator
    lazy={false}
>