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的示例。

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

React Native：在NavigationExperimental中禁用场景转换

1 个答案: