javascript - React Native:在NavigationExperimental中禁用场景转换

我之所以开始使用NavigationExperimental的原因是为了让我对导航和渲染有更全面的控制。

但是，我找不到在场景过渡时删除默认动画的方法。我只想直接跳到下一个屏幕。

import React, { Component } from 'react';
import {
  View,
  NavigationExperimental,
} from 'react-native';

const {
  CardStack: NavigationCardStack,
  StateUtils: NavigationStateUtils
} = NavigationExperimental;

class Navigation extends React.Component {

  constructor(props, context) {
    super(props, context);

    this._onPushRoute = this.props.onNavigationChange.bind(null, 'push');
    this._onPopRoute = this.props.onNavigationChange.bind(null, 'pop');

    this._renderScene = this._renderScene.bind(this);
  }

  // Now we finally get to use the `NavigationCardStack` to render the scenes.
  render() {
    return (
      <NavigationCardStack
        onNavigateBack={this._onPopRoute}
        navigationState={this.props.navigationState}
        renderScene={(sceneProps) => {
          return this._renderScene(sceneProps);
        }}
        style={{flex:1}}
      />
    );
  }

  // Render a scene for route.
  // The detailed spec of `sceneProps` is defined at `NavigationTypeDefinition`
  // as type `NavigationSceneRendererProps`.
  // Here you could choose to render a different component for each route, but
  // we'll keep it simple.
  _renderScene(sceneProps) {
    return (
      <View
        route={sceneProps.scene.route}
        onPushRoute={this._onPushRoute}
        onPopRoute={this._onPopRoute}
        onExit={this.props.onExit}
        style={{flex:1}}
      >
        <sceneProps.component />
      </View>
    );
  }
}

module.exports = Navigation

最佳答案

坏消息转换在CardStack中进行编码。提供了PR，但已被放弃并且没有合并。好消息CardStack是js component，因此您可以复制和修改它。在UIExplorer中可以找到使用NavigationTransitioner的示例。

编辑看起来cardStyleInterpolator属性是在3周前添加的，并将在React Native 0.41中发布。因此，您可以将NavigationCardStack.js文件的新版本复制到您的项目中并使用它。