在React Native中，按下按钮时重置StackNavigator

Question

我正在自学使用React Native制作应用程序。我正在使用React Navigation在按钮按下时在屏幕之间导航。我可以很好地导航屏幕。然而，在一个导航中，我还想重置stackNavigator。我已经查看了使用NavigationActions.reset()方法重置stackNavigator的解决方案，但我无法使其在按钮上起作用。再次强调，我正试图使用一个按钮来同时导航到新屏幕并重置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 />;
  }
}

- Jaden Zerbe

Answer 1

您可以使用以下代码来重置React Navigation版本1中的堆栈导航器：

import { NavigationActions } from 'react-navigation';

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

在React Navigation 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>
       );
   }
}

- Ali SabziNezhad

---

那我应该如何设置按钮的 onPress 字段以便使用这段代码呢（请原谅，我刚开始接触这个） - Jaden Zerbe

谢谢你的帮助。虽然你的答案不完全正确，但是你给我的足够帮助我解决了问题。如果你编辑导入语句以包括StackActions并将NavigationActions.reset更改为StackActions.reset，我会标记此帖子。再次感谢你的帮助。 - Jaden Zerbe

@JadenZerbe 你说得对！我的代码是针对React Navigation V1的，而在版本2中已经发生了变化！我已经编辑了我的答案，感谢你的评论 :) - Ali SabziNezhad

@AliSn 非常感谢。如果早些时候我能看到你的答案，我就可以节省3个小时的时间了。赞！！！ - Pranjal Gore

@PranjalGore 很高兴听到这个 :-) - Ali SabziNezhad

Answer 2

现在这将与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);

- Ahmad Wahaj

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);
}

- Keshav Gera