【问题标题】:React Navigation: How to go back to root Tab Navigator with specific tab from child stackReact Navigation:如何使用子堆栈中的特定选项卡返回根选项卡导航器
【发布时间】:2019-01-05 21:47:24
【问题描述】:

我在 React Native 中使用 react-navigation v2,每当想要返回根导航器中的 特定 选项卡时都会卡住。

我有以下路由堆栈:

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 选项卡。我可以使用以下脚本返回 Home 选项卡:

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

但我的目标是回到特定的标签位置,在本例中是 'Transactions' 标签。

我已经用谷歌搜索了很多次,但没有任何解决方案,我们将不胜感激。

【问题讨论】:

  • this.props.navigation.navigate('Transactions') 没有重置堆栈对我来说可以正常工作......
  • @ali-sn 是的,它有效,但我需要将我的堆栈重置到该屏幕。如何使用重置堆栈来做到这一点?
  • 如果我找到了解决方案,我会告诉你...! :-D
  • @ali-sn 我找到了解决方案,使用 2 个调度。

标签: javascript reactjs react-native react-navigation


【解决方案1】:

我找到了解决办法:

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

【讨论】:

    猜你喜欢
    • 2023-03-22
    • 1970-01-01
    • 1970-01-01
    • 2019-08-28
    • 1970-01-01
    • 2018-10-30
    • 2020-11-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多