react-native – 如何导航到不同的屏幕并返回到使用DrawerNavigator导航的屏幕？

我有两个组件(列表和详细信息)：

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

我想有两个屏幕(NowList和SoonList)基本上是相同类型的列表,所以我在屏幕上使用相同的List组件.从这些屏幕中的每一个我想导航到项目的详细信息,在这种情况下也具有相同类型的布局,因此我对列表项使用明细组件.

最后,当应用程序启动时,我希望显示NowList屏幕.使用抽屉我想导航到SoonList屏幕.

我不知道如何配置这条路线.但是,这就是我现在配置路线的方式：

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

当我从NowList路线导航到细节路线时.详细信息路线中有一个后退按钮,按下该按钮会导航回NowList.

但是,当我进入Soon路线并导航到Detail路线时,我会进入Detail屏幕.但是,当我按下详细信息导航标题上的后退按钮,而不是导航回SoonList屏幕时,我将导航到NowList屏幕.

我想我在这里遗漏了一些东西,或者我的路线布局不是它的假设.你能帮助我如何配置路线,以便我可以使用DrawerNavigator导航到不同的屏幕,然后从这些屏幕导航到另一个屏幕并再次返回到导航的屏幕？

您可以创建包含抽屉导航器和详细信息的堆栈导航器,这样您就可以从抽屉中访问现在列表和很快列表,并能够从两个列表导航到详细信息屏幕.

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

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

原文链接：https://www.f2er.com/react/300990.html

react-native – 如何导航到不同的屏幕并返回到使用DrawerNavigator导航的屏幕？

猜你在找的React相关文章