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

Question

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

列表.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>
        )
    }
}

细节.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 路线导航到 Detail 路线时。 Detail 路由中有一个后退按钮，按下后可导航回 NowList。

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

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

Answer 1

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

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

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