Блог

У меня есть приложение react native, в котором есть навигатор стека и навигатор нижних вкладок. Навигатор нижних вкладок и stack navigator имеют общие экраны между ними. Вот такая структура:

 const ExploreNavigator = createStackNavigator({
    Explore: {
        screen: ExploreScreen
    },
    Read: {
        screen: ReadScreen
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})
  

Теперь, если я перейду непосредственно к экрану чтения из навигатора нижней вкладки и перейду к экрану создания изображения в навигаторе стека, когда я нажму кнопку «Назад», я вернусь к экрану по умолчанию, который является экраном изучения?

Итак, каков наилучший подход к решению проблемы? Я знаю, что могу создать еще один навигатор стека и добавить соответствующие экраны. Кроме того, если следовать этому подходу, могу ли я назвать экраны навигатора стека одинаковыми?

Я думаю, что для этого не нужно выделять один экран на полужирном стеке и нижней вкладке. Итак, я предлагаю следующее

 const ExploreNavigator = createStackNavigator({
    Tabs: {
        screen: TabsNavigator
    },
    CreateImage: {
        screen: CreateImageScreen
    }
})




const TabsNavigator = createBottomTabNavigator({
    Explore: {
        screen: ExploreScreen,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadScreen,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
})
  

я бы сделал это так

     const ExploreNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadPrimary: {
        screen: ReadScreen
    },
    CreateImagePrimary: {
        screen: CreateImageScreen
    }
  })

  const ReadNavigator = createStackNavigator({
    ExplorePrimary: {
        screen: ExploreScreen
    },
    ReadSecond: {
        screen: ReadScreen
    },
    CreateImageSecond: {
        screen: CreateImageScreen
    }
  })




  const TabsNavigator = createBottomTabNavigator({
    ExploreTab: {
        screen: ExploreNavigator,
        navigationOptions: {
            tabBarLabel: "Explore"
        }
    },
    ReadTab: {
        screen: ReadNavigator,
        navigationOptions: {
            tabBarLabel: "Read"
        }
    }
  })