有没有可能在react native navigator中改变转换?

Question

我有3个不同的react native组件，我使用Navigator在它们之间导航。在第一个视图中，我定义了导航器:

视图1

<Navigator
    ref="nav"
    renderScene={@renderScene}
    initialRoute={@renderContent(I18n.t("Incidents"))}
    configureScene={ ->
      transition = Navigator.SceneConfigs.HorizontalSwipeJump
      transition.gestures = null
      transition
    }
  />

你可以看到过渡是HorizontalSwipeJump

视图2

 @props.navigator.push
  component: IncidentScreen
  incidentId: incident.id
  sceneConfig: -> Navigator.SceneConfigs.FloatFromBottomAndroid

正如你所看到的，我试图移动到视图#3使用FloatFromBottomAndroid，然而，它不工作。

通过查看RN的源代码，可以看到导航器。Push方法从道具中获取动画:

var nextAnimationConfigStack = activeAnimationConfigStack.concat([
  this.props.configureScene(route),
]);

那我该怎么办呢?

Answer 1

要获得SceneConfigs列表，您必须深入到react-native源代码中，但这里是截至撰写本文时的当前列表:

PushFromRight
FloatFromRight
FloatFromLeft
FloatFromBottom
FloatFromBottomAndroid
FadeAndroid
HorizontalSwipeJump
HorizontalSwipeJumpFromRight
VerticalUpSwipeJump
VerticalDownSwipeJump

使用例子:

<Navigator
  configureScene={(route) => {
    if (someCondition) {
      return Navigator.SceneConfigs.HorizontalSwipeJump;
    } else {
      return Navigator.SceneConfigs.PushFromRight;
    }
  }}
/>

Answer 2

好了，我明白了。我在视图1中缺少了这一部分:

configureScene={ (route) ->
      if route.sceneConfig
        route.sceneConfig
      else
        transition = Navigator.SceneConfigs.HorizontalSwipeJump
        transition.gestures = null
        transition
    }

Answer 3

如果有人还在看这个，你可以通过重置路由到你想要的结果来推送，而不需要动画。这是假设你没有对你的路由做任何特别的事情，比如保存转发路由或其他任何事情。

if( !shouldAnimate )
{
  var routeStack = this.refs.mainNav.state.routeStack;
  routeStack.push(newRoute);
  this.refs.mainNav.immediatelyResetRouteStack(routeStack);
}
else
{
  this.refs.mainNav.push(feature);
}

mainNav是我的导航器的ref。