react-native - 如何使 “Go back to initial StackNavigator Screen when TabNavigator'的Tab按下”

介绍

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

(如果用户按下按钮)

它返回到第一页。

简单用例

请参见TabNavigator

转到“进纸”选项卡

转到“用户”屏幕

转到另一个“用户”屏幕

按下主标签图标-“Feed”}

返回到“Feed”选项卡////这样您就不会看到“返回”按钮

如果您不了解此用例，请发表评论，我将为您绘制其状态流

我的主TabNavigator中的图标代码。

navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused }) => {
          const { routeName } = navigation.state;
          ....
          return (
              <TochableWithoutFeedback onPress={()=>{navigation.goback(iconName)}>
              // undefined is not a function when I press the Button
              // deeper screen. (not getting any error on Main)
                  <Ionicons
                      name={iconName}
                      size={30}
                      style={{ marginBottom: -3 }}
                      color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                      />
             <TochableWithoutFeedback>
         );
  },

最佳答案

实际上，这取决于您的路由深度，例如Instagram 2到3的深度路由，否则为制表符

因此您可以通过使用以下命令重置路由器或返回主路由器

this.props.navigation.goBack(null)

例如

标签导航的 child 啊堆栈导航，所以在堆栈中，您可以执行以下操作

// 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
        ]
      }))
    }

因此，每当有人按“主页”选项卡时，所有路由都会重置，您会看到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

然后继续...因此在Tab的takenavigation级别重置路由

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