javascript - react native : Disabling scene transitions in NavigationExperimental

Question

我开始使用 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

Answer 1

坏消息转换在 CardStack 中进行了硬编码。那里PR已提供但已被放弃且未合并。好消息 CardStack 是 js component所以你可以复制和修改它。在 UIExplorer 中可以找到使用 NavigationTransitioner 的示例.

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