javascript - que - react navigation screens

Restablecer la pila de navegación para la pantalla de inicio(React Navigation y React Native)

Question

Tengo un problema con la navegación de React Navigation y React Native. Se trata de restablecer la navegación y regresar a la pantalla de inicio.

Construí un StackNavigator dentro de un DrawerNavigator, y la navegación entre la pantalla de inicio y otras pantallas funciona. Pero el problema es que la pila de navegación crece y crece. No estoy seguro de cómo eliminar una pantalla de la pila.

Por ejemplo, al pasar de la pantalla de inicio a la pantalla de configuración, luego a la pantalla de entrada y, por último, a la pantalla de inicio, la pantalla de inicio está dos veces en la pila. Con el botón Atrás no salgo de la aplicación, sino de nuevo a la pantalla de entrada.

Cuando vuelva a seleccionar el botón de inicio, un reinicio de la pila sería genial, pero no sé cómo hacerlo. Aquí alguien intentó ayudar a otra persona con un problema similar, pero la solución no funcionó para mí.

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

Y este es un simple ejemplo de la pantalla del cajón

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={''home''}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate(''Home'')}}>
        <Text>{I18n.t(''home'')}</Text>
      </Icon.Button>

      <Icon.Button
        name={''settings''}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate(''Settings'')}}>
        <Text>{I18n.t(''settings'')}</Text>
      </Icon.Button>

      <Icon.Button
        name={''entry''}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate(''Entry'')}}>
        <Text>{I18n.t(''entry'')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

Espero que puedas ayudarme. ¡Esta es una parte esencial de la navegación y una solución sería genial!

Answer 1

En su StackNavigator y DrawerNavigator ha utilizado Home como una clave, y creo que tiene que ser único y por eso está creando el problema. ¿Puedes intentar reemplazar Home with Stack dentro de tu DrawerNavigator?

Espero que esto ayude :)

Answer 2

Así es como lo hago:

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: ''Menu''})
                    ]
                  }));
  }

al menos reemplaza ''Menú'' con ''Inicio''. Es posible que también desee adaptar this.props.navigation a su implementación.

Answer 3

Para usar Atrás, necesita encontrar la clave única asociada con la ruta. Dentro de su reductor de navegación, puede buscar el estado existente para encontrar la primera ruta en la pila usando esa ruta, tomar su clave y pasarla a Atrás. Atrás navegará a la pantalla antes de la ruta que diste.

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );

Answer 4

Así es como lo hago:

import { NavigationActions } from ''react-navigation''

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: ''ParentStackScreen'' })]
}))

La parte importante es key: null .

Eso borra la pila mientras navega desde un navegador infantil a un navegador principal .

Hazlo si recibes este error:

Para animaciones, uso

// https://github.com/oblador/react-native-animatable
import * as Animatable from ''react-native-animatable''

Yo solo controlo todas las animaciones yo mismo. Colóquelos en cualquier componente que desee envolviéndolo con <Animatable.View> .