react-native – 如何制作“按TabNavigator选项卡时返回初始Stac

发布时间：2020-12-15 16:21:21 所属栏目：百科来源：网络整理

导读：介绍就像Facebook,Instagram和任何其他移动应用程序一样,我想实现’回到Stacknavigator中的初始屏幕’ 如果用户按下按钮, 它会回到第一页. 简单的用例见TabNavigator 转到“Feed”标签转到“用户”屏幕转到另一个“用户”屏幕按主选项卡图标 – ‘Feed

介绍

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

>如果用户按下按钮,
>它会回到第一页.

简单的用例

>见TabNavigator
>转到“Feed”标签
>转到“用户”屏幕
>转到另一个“用户”屏幕
>按主选项卡图标 – ‘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)

例如.

标签导航孩子啊堆栈导航所以在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

并继续…所以重置路线在关键字导航水平的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'
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!