使用 React Navigation 进行左右导航答案

【问题标题】：Left and right navigation with React Navigation使用 React Navigation 进行左右导航
【发布时间】：2018-10-18 00:35:39
【问题描述】：

对于我的一生，我无法弄清楚这一点；我有一个 React Native 应用程序，它在初始屏幕上进行一些身份验证，然后导航到登录页面。登陆页面（中）的左侧和右侧都有一个屏幕。

使用 this.props.navigation.navigate('RouteName') 可以正常导航。但是，当我导航到左侧屏幕时，它仍然从右侧滑入。有没有办法覆盖这种行为？

const RootStack = createStackNavigator(
  {
    Splash: {screen: Splash, navigationOptions:navConfig},
    middleScreen: {screen: Middle, navigationOptions:navConfig},
    LeftScreen: {screen: Left, navigationOptions:navConfig},
    RightScreen: {screen: Right, navigationOptions:navConfig},
  })

只是没有将所有场景都加载到堆栈中吗？

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

很抱歉，您对滑动方向动画的直观定义完全错误。它不是那样工作的，你定义路由的顺序与动画这些路由的动画完全没有关系。

进一步说，您的请求很常见，在这个 stackoverflow 问题中您可以找到您正在寻找的答案：From left to right window animation with react-navigation?

【讨论】：

感谢您的回复 - 我也想通了。我查看了链接的帖子，但该解决方案不再有效，因为 CardStackStyleInterpolator 不再与更新版本的反应导航打包。
@Make-HCI 你可以随时定义你的动画：reactnavigation.org/docs/en/transitioner.html
其实也会有一些肮脏的方法，我不推荐。当您导航时，您可以使用重置操作来重建堆栈，在它的顶部有您想要使用从右到左动画导航到的屏幕，然后您将所有想要访问的路线从从左到右，然后，要导航，你叫 pop!他们没有整合它真是太愚蠢了。过去我在使用这个库时遇到了很多问题（现在由于 v2 而解决了），并且那里的维护者并不好：github.com/react-navigation/react-navigation/issues/2390
是的，我只是要做一个重置操作并命令他们在导航和使用 PopTo 时获得正确的动画。疯了，这是让像这样的基本工作正常工作所需的混乱。谢谢！
@Make-HCI，如果是这样，请将问题标记为已解决:)

【解决方案2】：

使用@Giacomo Cerquone 的建议，我解决了我在这里遇到的大部分问题。

const resetAction = StackActions.reset({
    index: 1,
    actions: [
    NavigationActions.navigate({ routeName: 'Left'}),
    NavigationActions.navigate({ routeName: 'Middle' }), // Index 1 selects this one
    NavigationActions.navigate({ routeName: 'Right' }),
  ],
});

this.props.navigation.dispatch(resetAction);

【讨论】：