1
votes

réagir navigation comment revenir à une pile différente

const HomeStack = createStackNavigator({
    Home: HomeScreen,
});

const CarStack = createStackNavigator({
    Booking: BookingScreen,
    Confirm: ConfirmScreen

});

export default createBottomTabNavigator({
    HomeStack,
    CarStack,
});

export default class HomeScreen extends React.Component {
    goTo(){
            this.props.navigation.navigate('Confirm')
    }
    render() {
        return (
            <View style={css.container}>
                <button onPress={this.goTo.bind(this)}>go to</button>
            </View>
        );
    }   
}



export default class ConfirmScreen extends React.Component {
    goBack(){
            this.props.navigation.goBack()
    }
    render() {
        return (
            <View style={css.container}>
                <button onPress={this.goBack.bind(this)}>goback</button>
            </View>
        );
    }   
}
In home screen, when I click goto, it take me to confirmscreen, which is good.
But when I press go back, it takes me to booking screen instead of home screen. Which is bad.
It suppose to take me to home screen. What am i missing here?

react-native react-navigation

0 commentaires

3 Réponses :

0
votes

Vous devez définir 2 navigateurs séparés et vérifier l'utilisateur / invité dans un autre composant. comme ceci:

Provider.js:

export default createStackNavigator({
    auth: Auth // sample
})

App.js:

export default createStackNavigator({
    home: Home // sample
})

SignedOut.js:

export default class Provider extends Component {
    render() {
        let {key, signedIn, checkedSignIn} = this.state
        return(
            <View>
                {
                    checkedSignIn
                        ? signedIn
                            ? <App />
                            : <SignedOut />
                        : null
                }
            </View>
        )
    }
}

4 commentaires

s'agit-il de navigation.goBack ()?

Oui. après cela, navigation.goBack () ne vous amène pas à l'écran de confirmation car il y a deux navigateurs de pile et après la connexion (confirmation), les utilisateurs ne devraient pas avoir accès à l'écran de confirmation (ou au navigateur d'authentification). essayez-le. veuillez marquer la réponse, si cela a fonctionné.

ne fonctionne pas, tout d'abord je ne fais aucune authentification. Deuxièmement, j'ai trois écrans en deux piles. les vôtres sont deux écrans en deux piles.

C'est juste un exemple de frère. vous pouvez ajouter n'importe quel écran à ces piles.

0
votes

Si vous utilisez react-navigation v2.x ou version ultérieure, utilisez directement la méthode navigation pour accéder à votre écran Accueil .

Personnalisez le comportement du bouton de retour et appelez this.props.navigation.navigate ('Accueil') sur le bouton de retour, appuyez sur dans l'écran Confirmation . Cela provoquera l'effet souhaité.

Depuis react-navigation v2.0, l'action naviguer est moins insistante. Si l'itinéraire que vous spécifiez est déjà dans la pile, alors cet écran sera ouvert, au lieu de pousser un nouvel écran dans la pile par défaut.

Référence

2 commentaires

Je veux juste revenir en arrière, pas aller à un écran spécifique.

Le problème ici est que vous vous dirigez vers CarStack à partir de votre HomeStack . La navigation de Accueil à Confirm monte tout le CarStack sur le dessus, qui a l'écran initial comme Réservation . Ajoutez simplement un drapeau lors de la navigation de Accueil à Confirmer et en utilisant ce drapeau, vous pouvez vérifier et naviguer vers l'écran précédent souhaité.

0
votes

Essayez ceci:

this.props.navigtion.goBack('Home')

J'espère que cela vous aidera.

0 commentaires