React Navigation zurückgesetzt zuerst erscheint und dann navigiert

Question

Ich benutze Reagieren Navigation in meiner App, und wenn ich Reset zum Löschen des Stapels und Navigieren zu anderen Bildschirm verwenden, zeigt es seltsame Animation, wie zuerst alle Bildschirme, die waren Der Stapel wird geöffnet und navigiert dann zum neuen Bildschirm. Hier

ist der Code

// Code zum Zurücksetzen des Stapels

Login.js

const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
      NavigationActions.navigate({routeName: 'Home'}) 
     ], 
    }) 
    this.props.navigation.dispatch(resetAction) 

Route.js

Home: { 
    screen: Tab, 
    navigationOptions: { 
     ...headerStyle, 
    } 
}, 
Intro: { 
    screen: IntroScreen, 
    navigationOptions: { 
     header: null 
    } 
}, 
LogIn: { 
    screen: LogIn, 
    navigationOptions: { 
     ...headerStyle, 
     title: 'LogIn', 
    } 
}, 

So geht es zunächst in den Bildschirm und dann zum Home-Bildschirm, wie Sie dies beheben, so dass es direkt auf Home-Bildschirm

geht

Answer 1

Wenn Sie

const resetAction = NavigationActions.reset({ 
     index: 0, 
     actions: [ 
      NavigationActions.navigate({routeName: 'Home'}) 
     ], 
    }) 
    this.props.navigation.dispatch(resetAction) 

von Ihrem Login.js entfernen dann der Stapel Navigator geht automatisch auf den ersten Bildschirm im StackNavigator, die in diesem Fall wird Ihre Home: {...} Bildschirm sein.

Sie müssen den Stapel nicht zurücksetzen.

Wenn Sie zu einem anderen Bildschirm navigieren möchten, indem Sie eine Taste zum Beispiel Drücken Sie dann mit

import React, { Component } from 'react'; 
import { 
    View, 
    Button, 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
export default class Initial extends Component { 

    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 

      <Button 
      onPress={() => navigate('Login')} 
      title="Go to Login" 
      color="#357DED" 
      /> 

     </View> 
    ); 
    } 
}