1
Reactネイティブでナビゲーションのカスタムトランジションを行った人がいるかどうかを知りたいと思います。私はいくつかの可能性について知っていますが、私の目的には適していません。Reactネイティブナビゲーションカスタムトランジション
ありがとうございました
Reactネイティブでナビゲーションのカスタムトランジションを行った人がいるかどうかを知りたいと思います。私はいくつかの可能性について知っていますが、私の目的には適していません。Reactネイティブナビゲーションカスタムトランジション
ありがとうございました
はいカスタマイズ可能です。
チェックこの例
'use strict';
var React = require('React');
var ReactNative = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} = ReactNative;
var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
// Make it snap back really quickly after canceling pop
snapVelocity: 8,
// Make it so we can drag anywhere on the screen
edgeHitWidth: SCREEN_WIDTH,
});
var CustomSceneConfig = Object.assign({}, BaseConfig, {
// A very tighly wound spring will make this transition fast
springTension: 100,
springFriction: 1,
// Use our custom gesture defined above
gestures: {
pop: CustomLeftToRightGesture,
}
});
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
<Text style={styles.welcome}>Greetings!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go to page two</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
<Text style={styles.welcome}>This is page two!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go back</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'white',
},
});
AppRegistry.registerComponent('SampleApp',() => SampleApp);
この例は素晴らしいですが、私はまだ、私はこのような何かを行うことができますかどうかを知りたいと思います。青い部分をクリックした後、この図でわかるように全画面にスムーズに拡大されます。私は
–
user3549745
の下に描きました。あなたはsceneConfigsで遊ぶ必要があります。https://github.com/facebook/react-native/blob/f64538943e180adc2180d89285fab6727eaf3982/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js – Jickson
ありがとうございます。私はこの部分を理解する必要があります:) – user3549745