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