时间戳

首页 > 解决方案 > 是否可以在不指定路由名称的情况下单步执行 React Navigation 堆栈导航器？

react-native - 是否可以在不指定路由名称的情况下单步执行 React Navigation 堆栈导航器？

问题描述

大部分细节都在标题问题中。我并不是在努力在屏幕之间导航，但我想知道是否可以使用 push/pop（或其他东西）在不识别特定路线的情况下单步执行堆栈。所以如果我有一堆屏幕的堆栈，他们可以有一个按钮，效果是

<TouchableOpacity onPress={() => navigation.push()}>
    <Text>Next</Text>
</TouchableOpacity>

或者这是对推送的完全滥用？这里的目标是能够在开发中快速更改堆栈的顺序，而无需遍历所有屏幕并调整按钮路径。因此，如果屏幕被简单命名为 1、2、3 和 4，并且我想将 2 移到末尾（3 变为 2，4 变为 3），我必须更新屏幕 2、3 的下一步/后退按钮路线，和 4. 而如果它们都被编码为“下一个”或“后退”，我所做的只是在堆栈导航器定义中的屏幕 4 之后剪切和粘贴屏幕 2。谢谢你的帮助。

标签： react-nativereact-navigationstack-navigator

解决方案

您可以获取名称列表，找到下一个名称，然后推送它。像这样定义一个助手：

const pushNext = () => state => {
  // Get the current route name
  const currentRouteName = state.routes[state.index].name;

  // Get the index of the current route in the route name list
  const currentRouteIndex = state.routeNames.indexOf(currentRouteName);

  // Get the next item in the route name list
  const nextRouteName = state.routeNames[currentRouteIndex + 1];

  if (nextRouteName) {
    // If there was a next route, return a push action
    return StackActions.push(nextRouteName);
  } else {
    // Reset to current state for noop or whatever you want
    return CommonActions.reset(state);
  }
};

然后在您的组件中使用它：

navigation.dispatch(pushNext());

推荐阅读