如何导航到不同的屏幕并返回到使用 DrawerNavigator 导航的屏幕？答案

【问题标题】：How to navigate to different screen and get back to the screen from where its navigated using DrawerNavigator?如何导航到不同的屏幕并返回到使用 DrawerNavigator 导航的屏幕？
【发布时间】：2023-03-31 03:25:01
【问题描述】：

我有两个组件（列表和详细信息）：

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 组件。我想从这些屏幕中的每一个导航到项目的详细信息，在这种情况下，它也具有相同类型的布局，因此我对两个列表项都使用了 Detail 组件。

最后，当应用程序启动时，我希望显示 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 路由导航到 Detail 路由时。 Detail 路由中有一个后退按钮，按下该按钮会导航回 NowList。

但是，当我转到 Soon 路线并导航到 Detail 路线时，我会转到 Detail 屏幕。但是，当我按下详细导航标题上的后退按钮时，我不是导航回 SoonList 屏幕，而是导航到 NowList 屏幕。

我想我在这里遗漏了一些东西，或者我的路线布局不是它想象的那样。您能帮我如何配置路线，以便我可以使用 DrawerNavigator 导航到不同的屏幕，然后从这些屏幕导航到另一个屏幕，然后再回到导航到的屏幕吗？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您的路线布局未在SoonStack 导航器中指定Detail 屏幕。当您导航到 Detail 时，react-navigation 会导航到唯一以这种方式命名的屏幕。由于它在NowStack中，所以返回到堆栈中的第一个屏幕。

要解决此问题，您可以将另一个 Detail 屏幕添加到 SoonStack 导航器，但是您可能希望以不同的方式命名它，或者使用其键导航到每个 Detail 屏幕。

为了能够导航到右侧Detail 屏幕，您可以为每个堆栈导航器添加一个参数。

例如：

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

然后您可以使用该参数导航到正确的屏幕。

此外，可以只使用一个包含三个不同屏幕的StackNavigator，并在使用抽屉切换时将reset 堆栈到正确的屏幕。

你可以阅读更多关于resethere的信息。

如何使用重置

如果您只有一个堆栈导航器：

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

然后抽屉可以将堆栈状态重置为您想要的任何状态。例如，如果第一个屏幕是NowList，并且在抽屉中点击了SoonList，您可以调用：

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

这将导致堆栈重置并将SoonList 作为第一个屏幕。如果Details被打开，那么它是堆栈中的第二个，并且返回总是会回到正确的屏幕。

【讨论】：

我不明白使用重置的概念。您能否以我的问题为例解释reset？
对不起，我还是没搞懂这个概念。这里的抽屉是怎么配置的？
我没有尝试过这个，但是从文档中你必须传递onItemPress，它使用重置而不是正常的导航操作。我认为我建议的第一个选项可能更易于实施。

【解决方案2】：

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

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

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

【讨论】：