首页 文章

React Navigation：如何使用子堆栈中的特定选项卡返回到根选项卡导航器

提问于
浏览 次
1

我在React Native中使用 react-navigation v2 并且只要想要返回到根导航器中的 specific 选项卡就会卡住 .

我有以下路由堆栈：

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

我现在处于 PinEntry 屏幕，我想回到TabNavigator中的 Transactions 标签 . 我可以使用以下脚本返回“主页”选项卡：

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

但我的目标是回到特定的标签位置，在这种情况下是 'Transactions' 标签 .

我已经google了很多次，但没有解决方案，任何帮助将不胜感激 .

javascript reactjs react-native react-navigation

1 回答

  • 1

    我找到了解决方案：

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

相关问题