React Navigation: Animieren des Seitenübergangs der ersten Karte im Stapel

Question

Also baue ich eine reaktionsnative App und verwende React-Navigation als meinen Router. Einige meiner Komponenten erfordern einige ausgefallene Seitenübergänge. Daher habe ich einen benutzerdefinierten Übergang implementiert, der die Komponente von React-Navigation verwendet. Ich kann die Seitenübergangsanimation in meinem Navigator verwenden, solange ich mehr als eine Route im Stapel habe. Ich habe bemerkt, dass dieses Muster auch für ihre Standardnavigatoren wie StackNavigator, TabNavigator usw. existiert. Die erste Route in einem Navigator scheint nie einen Seitenübergang zu haben. Zum Beispiel:

const ExampleNavigator = StackNavigator({ 
    home: { screen: HomeScreen }, 
    test: { screen: TestScreen }, 
    introduction: { screen: IntroductionScreen }, 
}) 

Beide Testbild und IntroductionScreen wird den Standard Folienübergang durch den Stapel Navigator definiert haben, aber der Bildschirm zu Hause nicht. Meine Frage ist, wie kann ich auch einen Seitenübergang auf dem ersten Bildschirm anwenden?

Answer 1

Wenn Ihre App anfänglich lädt, wird von der Splash-Seite übernommen. Ihre App lädt jedoch nur den letzten bekannten Bildschirm, wenn sie vom Hintergrund geladen wird. Obwohl es sich nicht um eine typische Benutzererfahrung handelt, können Sie einfach einen leeren "Pre-Screen" vor jeder beliebigen Route platzieren, um den gewünschten Effekt zu erzielen. Hier ist die Komponente:

class PreScreen extends Component { 
    constructor(props) { 
    super(props); 
    // Immediately push the Home screen on to the stack 
    const { navigation } = this.props; 
    navigation.navigate('Home'); 
    } 
    render() { 
    return (
     <View style={{ flex: 1, backgroundColor: '#fff' }} /> 
    ) 
    } 
} 

Dann in Ihrem StackNavigator etwas tun, wenn Sie Ihre Home-Bildschirm wollen in den Übergang

const RootNavigator = StackNavigator({ 
    PreScreen: { 
    screen: PreScreen, 
    }, 
    Home: { 
    screen: HomeScreen, 
    navigationOptions: ({navigation}) => ({ 
     // Note: The PreScreen will still be a valid route so I'm just hiding the back button here. 
     headerLeft: null 
    }) 
    } 
});