Question

我目前正在教自己使用React Native制作应用程序。我使用React Navigation在按下按钮的屏幕之间导航。我可以很好地浏览屏幕。但是，在一次导航中，我还想重置 stackNavigator 。我已经查看了使用stackNavigator方法重置NavigationActions.reset()的解决方案，但我无法让它适用于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

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

import { NavigationActions } from 'react-navigation';

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

在反应导航版本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

现在这将适用于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

3 个答案: