Сбросить StackNavigator при нажатии кнопки React Native - PullRequest
Новая
       1

Сбросить StackNavigator при нажатии кнопки React Native

0 голосов
/ 27 мая 2018

В настоящее время я учусь создавать приложение с помощью React Native.Я использую React Navigation для навигации между экранами при нажатии кнопок.Я могу нормально перемещаться по экранам.Тем не менее, на одной навигации я также хочу сбросить stackNavigator.Я посмотрел на решения для сброса stackNavigator с использованием метода NavigationActions.reset(), но я не могу заставить его работать для кнопки.Просто перепрошить, я застрял, пытаясь использовать кнопку, чтобы перейти к новому экрану и сбросить 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 />;
  }
}

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Теперь это будет работать с 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);
0 голосов
/ 27 мая 2018

Вы можете использовать этот код для сброса стекового навигатора в версии 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>
       );
   }
}
...