react-native - react native navigation

¿Cómo navegar a una pantalla diferente y volver a la pantalla desde donde se navega usando DrawerNavigator?

Question

Tengo dos componentes (Lista y Detalle):

List.js:

export default class List extends React.Component {
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text style={styles.headerText}>List of Contents</Text>
                <Button onPress={()=> navigate(''Detail'')} title="Go to details"/>
            </View>
        )
    }
}

Detail.js:

export default class Detail extends React.Component {
    render() {
        return (
            <View>
                <Text style={styles.headerText}>Details of the content</Text>
            </View>
        )
    }
}

Me gustaría tener dos pantallas (NowList y SoonList) que son básicamente del mismo tipo de lista, así que estoy usando el mismo componente List para ambas pantallas. Y desde cada una de estas pantallas quiero navegar a los Detalles del artículo, que también en este caso tiene el mismo tipo de diseño, así que estoy usando el componente Detalle para ambos elementos de la lista.

Finalmente, cuando se inicie la aplicación, quiero que aparezca la pantalla de la lista Now. Y usando el cajón me gustaría navegar a la pantalla SoonList.

No estoy seguro de cómo configurar esta ruta. Pero, así es como he configurado las rutas por ahora:

const NowStack = StackNavigator({
    NowList: {
        screen: List,
        navigationOptions: {
            title: ''Now'',
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: ''Detail'',
        }
    }
});

const SoonStack = StackNavigator({
    SoonList: {
        screen: List,
        navigationOptions: {
            title: ''Soon'',
        }
    }
});

export const Drawer = DrawerNavigator({
    Now: {
        screen: NowStack,
    },
    Soon: {
        screen: SoonStack,
    }
});

Cuando navego desde la ruta NowList a la ruta Detail. Hay un botón de retroceso en la ruta de detalles que, al presionar, vuelve a la lista actual.

Sin embargo, cuando voy a la ruta Pronto y navego hasta la ruta Detalle, voy a la pantalla Detalle. Pero, cuando presiono el botón Atrás en el encabezado Navegación detallada, en lugar de volver a la pantalla Lista rápida, voy a la pantalla Lista ahora.

Creo que me falta algo aquí, o mi diseño de ruta no es como debería ser. ¿Podrían ayudarme a configurar las rutas para que pueda usar DrawerNavigator para navegar a diferentes pantallas, y desde esas pantallas navegar a otra pantalla y volver a la pantalla desde la que navegué?

Answer 1

El diseño de su ruta no especifica una pantalla de Detail en el navegador SoonStack . Cuando navega hasta Detail , reaccionar: la navegación se desplaza a la única pantalla que recibe ese nombre. Dado que está en NowStack , regresa a la primera pantalla en la pila.

Para resolver esto, puede agregar otra pantalla de SoonStack navegador SoonStack , sin embargo, le gustaría nombrarlo de manera diferente, o navegar a cada pantalla de detalles usando su clave.

Para poder navegar a la pantalla de Detail derecha, puede agregar un parámetro a cada navegador de pila.

Por ejemplo:

const SoonStack = StackNavigator({
    SoonList: {
        screen: List,
        navigationOptions: {
            title: ''Soon'',
        }
    },
    SoonDetail: {
        screen: Detail,
        navigationOptions: {
            title: ''Detail'',
        }
    }
},{
    initialRouteParams: {
        detailScreen: ''SoonDetail''
    }
});

Luego puede usar el parámetro para navegar a la pantalla correcta.

Además, es posible usar solo un StackNavigator único con las tres pantallas distintas en él y reset la pila a la pantalla correcta al cambiar con el cajón.

Puede leer más sobre reset aquí .

cómo usar el restablecimiento

Si tiene un navegador de pila único:

const TheStack = StackNavigator({
    NowList: { screen: List, ... },
    SoonList: { screen: List, ... },
    Detail: {screen: Details, ... }
});

Luego, el cajón puede restablecer el estado de pila para que sea lo que quieras. Por ejemplo, si la primera pantalla era NowList y SoonList se hace clic en el cajón, puede llamar a:

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

Esto causaría que la pila se reinicie y tenga SoonList como la primera pantalla. Si se abre Detalles, entonces es el segundo en la pila, y la parte posterior siempre regresará a la pantalla correcta.

Answer 2

Puede hacer un navegador de pila que contenga el navegador y los detalles de su cajón, de esta manera puede acceder tanto a la lista ahora como a la lista desde el cajón y a la pantalla de detalles de ambas listas.

const App = StackNavigator({
  Drawer: {
    screen: Drawer,
  },
  Detail: {
    screen: Detail,
    navigationOptions: {
      title: ''Detail'',
    },
  },
});

const Drawer = DrawerNavigator({
  NowList: {
    screen: List,
  },
  SoonList: {
    screen: List,
  },
});