在按下按钮时重置 StackNavigator React Native

Question

我目前正在自学使用 React Native 制作应用程序。我正在使用 React Navigation 在按下按钮时在屏幕之间导航。我可以很好地浏览屏幕。但是，在一个导航中，我还想重置 stackNavigator。我已经查看了使用 NavigationActions.reset() 方法重置 stackNavigator 的解决方案，但我无法让它为 Button 工作。只是重复一下，我一直在尝试使用按钮导航到新屏幕并重置 stackNavigator。这是我的代码：

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationActions, StackActions, createStackNavigator } from 'react-navigation'; // Version can be specified in package.json



class HomeScreen extends React.Component {
     render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                  title="Join Group"
                  onPress={() => this.props.navigation.push('JoinGroup')}
                />
                <Button
                  title="Create Group"
                  onPress={() => this.props.navigation.push('CreateGroup')}
                />
            </View>
        );
    }
}

class JoinGroupScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Join Here</Text>
            </View>
        );
    }
}

class Index extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Index</Text>
                <Button
                    title="Login"
                    onPress={() => this.props.navigation.push('Login')}
                />
                <Button
                    title="Register"
                    onPress={() => this.props.navigation.push('Register')}
                />
            </View>
        );
    }
}

/* This Screen contains the button where I want to navigate screens and reset the StackNavigator */

class LoginScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Login Here</Text>
                <Button
                    title="Login"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
            </View>
         );
    }
}

class CreateGroupScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Create Here</Text>
            </View>
        );
    }
}

const RootStack = createStackNavigator(
  {
    Home: {
        screen: HomeScreen,
    },
    JoinGroup: {
        screen: JoinGroupScreen,
    },
    CreateGroup: {
        screen: CreateGroupScreen,
    },
    Login: {
        screen: LoginScreen,
    },
    Index: {
        screen: Index,
    },
  },
  {
    initialRouteName: 'Index',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Answer 1

您可以使用此代码在 React 导航版本 1 中重置堆栈导航器：

import { NavigationActions } from 'react-navigation';

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

在 React 导航版本 2 中它已经改变，你可以使用这个代码：

import { StackActions, NavigationActions } from 'react-navigation';

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

在你的情况下，你可以这样使用它：

/* This Screen contains the button where I want to navigate screens and reset the StackNavigator */

class LoginScreen extends React.Component {

render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Login Here</Text>
                <Button
                    title="Login"
                    onPress={() => { 
                       const resetAction = StackActions.reset({
                           index: 0,
                           actions: [NavigationActions.navigate({ routeName: 'Home' })],
                       });
                       this.props.navigation.dispatch(resetAction);
                    }
                />
           </View>
       );
   }
}

Answer 2

Now this will work with React Navigation 2.0

import { StackActions, NavigationActions } from 'react-navigation';

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

Answer 3

import { NavigationActions, StackActions } from 'react-navigation';

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

在按下按钮时重置 StackNavigator React Native

Reset StackNavigator on Button Press React Native

react-native

stack-navigator