2017-01-09 5 views
2

なぜ、NavigationExperimentalを使い始めたのは、ナビゲーションとレンダリングを完全に制御できるからです。React Native: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 

答えて

1

悪いニュースの移行は、CardStackでホールドされます。そこにPRが提供されましたが、それは放棄され、統合されませんでした。グッドニュースCardStackjs componentですので、コピーして変更することができます。 NavigationTransitionerを使用する例は、UIExplorerにあります。

編集cardStyleInterpolatorのように見えますが、3週間前に追加され、React Native 0.41でリリースされます。だから、NavigationCardStack.jsファイルの新しいバージョンをプロジェクトにコピーして使用するだけです。

関連する問題