使用 React Navigation 多次堆叠同一屏幕

Question

我在 StackNavigator 上有 3 个屏幕：MainSearch、MonsterPage、ItemPage。我想多次堆叠 MonsterPage 和 ItemPage （从 MonsterPage 你可以去 ItemPage 反之亦然）

是否可以实例化屏幕？

const AppNavigator = createStackNavigator(
    {
        Home: MainSearch,
        MonsterPage: MonsterPage,
        ItemPage: ItemPage
    },
    {
        initialRouteName: "Home"
    }
);

export default createAppContainer(AppNavigator);

我想要的：

MainSearch -> ItemPage(1) -> MonsterPage(1) -> ItemPage(2) -> etc...

或

MainSearch -> MonsterPage(1) -> ItemPage(1) -> MonsterPage(2) -> etc...

我得到的是：

MainSearch -> MonsterPage(1) -> ItemPage(1) ->(goes back to) MonsterPage(1)

Gif showing what happens

MainSearch

onPress={() => { this.props.navigation.navigate(`${r._source.super_cat === 'monster' ? 'MonsterPage' : 'ItemPage'}`, { item: r._source }) }}

MonsterPage

onPress={() => { this.props.navigation.navigate('ItemPage', { item: {id: drop.item_id, NameZh_ragmobile: drop.item_name_EN, super_cat: 'item'} }) }

项目页面

onPress={() => { this.props.navigation.navigate('MonsterPage', { item: {id: mob.mob_id, NameZh_ragmobile: mob.mob_name_EN, super_cat: 'monster'} }) }

Answer 1

我明白了...只需将 this.props.navigation.navigate(...) 更改为 this.props.navigation.push(...)

Answer 2

除了已接受的答案外，也许还要检查您的导入路径，以免您多次指向同一屏幕，如下所示。

import CategoriesScreen from './screens/CategoriesScreen'   <--- Same
import MealsScreen from './screens/CategoriesScreen'        <--- Path

使用 React Navigation 多次堆叠同一屏幕

Stack same screen multiple times with React Navigation

javascript

react-native

react-navigation

react-navigation-stack