代码之家 › 专栏 › 技术社区 › Justinus Hermawan

React Navigation:如何从子堆栈返回具有特定选项卡的根选项卡导航器

react-navigation react-native reactjs javascript

1

Justinus Hermawan · 技术社区 · 7 年前

我在用 反应导航v2 在React Native中,只要想回到 具体的 根导航器中的选项卡。

我有以下路由堆栈:

const HomeStack = createStackNavigator(
  {
    Home: Home,
    CreateInvoice: CreateInvoiceScreen,
    InvoiceSummary: InvoiceSummaryScreen,
    PinEntry: PinEntryScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const CustomersStack = createStackNavigator(
  {
    Customers: CustomersScreen,
    Details: CustomerDetailsScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const Tab = createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  }
);

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen,
    navigationOptions: {...navigationOptions}
  },
  home: {
    screen: HomeScreen,
    navigationOptions: {...navigationOptions}
  }
});

我现在在针尖屏幕和我想回到交易选项卡导航器中的选项卡。我可以回去家使用以下脚本的选项卡:

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate('Home')]
});
this.props.navigation.dispatch(resetAction);

但我的目标是回到特定的标签位置,在这种情况下 '交易' 标签。

我已经在谷歌上搜索了很多次,但是没有解决方案,任何帮助都将不胜感激。

1 回复 | 直到 7 年前

1

4

MewX 6 年前

我找到了解决办法:

const resetAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [NavigationActions.navigate({ routeName: 'Home' })]
});
const goToTransaction = NavigationActions.navigate({
  routeName: 'Transactions'
});
this.props.navigation.dispatch(resetAction);
this.props.navigation.dispatch(goToTransaction);