javascript - Stack same screen multiple times with React Navigation - Stack Overflow

admin管理员组

文章数量:1328034

I have 3 screen on a StackNavigator : MainSearch, MonsterPage, ItemPage. And I want to stack MonsterPage and ItemPage multiple times (from MonsterPage you can go to ItemPage and vice versa)

Is possible to instantiate the screens?

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

export default createAppContainer(AppNavigator);

What I want:

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

or

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

What I get:

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

ItemPage

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

I have 3 screen on a StackNavigator : MainSearch, MonsterPage, ItemPage. And I want to stack MonsterPage and ItemPage multiple times (from MonsterPage you can go to ItemPage and vice versa)

Is possible to instantiate the screens?

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

export default createAppContainer(AppNavigator);

What I want:

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

or

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

What I get:

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

ItemPage

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

• javascript
• react-native
• react-navigation
• react-navigation-stack

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 17, 2019 at 19:56 Guilherme FagaGuilherme Faga 14811 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

I got it... just change this.props.navigation.navigate(...) to this.props.navigation.push(...)

In addition to the accepted answer, maybe check your import path too so that you are not pointing to the same screen multiple times like shown below.

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

本文标签： javascriptStack same screen multiple times with React NavigationStack Overflow