如何制作“按TabNavigator选项卡时返回初始StackNavigator屏幕”

Question

简介

就像Facebook，Instagram和任何其他移动应用程序一样，我想实现'回到Stacknavigator中的初始屏幕'

1. 如果用户按下按钮，
2. 它会回到第一页。

简单用例

1. 见TabNavigator
2. 转到“Feed”标签
3. 转到“用户”屏幕
4. 转到另一个“用户”屏幕
5. 按主选项卡图标 - 'Feed'}
6. 返回“Feed”标签//这样您就不会看到“后退”按钮

如果你不理解这个用例，请发表评论，我会为你绘制状态流程

我的主要TabNavigator上的图标代码。

Import-CSV -Header @('1','2','3','4','5','6')

Answer 1

实际上，这取决于您的路由有多少像Instagram 2到3深度路由其他都是标签

因此您可以使用

重置路由器或返回主路由器

this.props.navigation.goBack(null)

例如。

选项卡导航子啊堆栈导航所以在Stack中，你可以做类似

的事情

// Anyone watching this, please check your react-navigation version
// I'm using ^1.0.0-beta.21.
// props for tabBarOnpress varies can be varied (Editor John Baek)
tabBarOnPress: ({scene, jumpToIndex}) => {
      jumpToIndex(scene.index)
      navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({ routeName: 'home' }) // go to first screen of the StackNavigator
        ]
      }))
    }

所以每当有人按下Home Tab然后所有路线重置，你就会看到Feed屏幕就像Instagram一样

TabNavigation 
  -Home
      |
      StakeNavigation 
                    |
                    mainScreen //main of home 
                    Subrouts 
                    RouteToProfile //just like insta

  -Search 
        |
         StakeNavigation 
                       |
                       mainScreen //main of search 
                       searchResult //if people serch some specific 

然后继续...所以重置路线在tabNavigation级别Tab

const SubHome = StackNavigator({
  Home: { screen: Home },
  Home2: { screen: Home2 },
  Home3 : { screen: Home3 },
},{
  navigationOptions:({navigation,screenProps})=>({
    tabBarLabel: I18n.t('tab_car'),
    tabBarIcon: ({ tintColor }) => (
      <CustomIcon name={'Home'} width={28} height={30} fill={tintColor} />
    ),
    tabBarOnPress: (tab, jumpToIndex) => {
      jumpToIndex(tab.index)
      navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({ routeName: 'Home' }) // go to first screen of the StackNavigator
        ]
      }))
    }
  }),
  headerMode:'none'
});