版本:react-native-router-flux:v4.0.5,react:v16.4.2,react-native:v0.56.0
我有一种在场景之间导航的情况如下:
场景A(参数:xA) - >场景B(参数:xB) - >场景A(参数:yA) - >场景B(参数:yB)
这是一种循环。我也应该可以在NavBar中使用后退按钮返回上一个场景。
问题出在动画方向上。通常是从右到左。但是当从场景B(参数:xB)转到场景A(参数:yA)时,方向是从左到右(感觉就像点按后退按钮)。我希望这是从右到左的正常方向。
有什么建议?
您可以根据需要使用自定义过渡效果,如下所示:
import StackViewStyleInterpolator from 'react-navigation-stack';
<Scene
key='main'
hideNavBar
transitionConfig={transitionConfig}
>
...more scenes
</Scene>
const MyTransitionSpec = ({
duration: 1000,
// easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
// timing: Animated.timing,
});
const transitionConfig = () => ({
transitionSpec: MyTransitionSpec,
// screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid,
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const width = layout.initWidth;
//right to left by replacing bottom scene
// return {
// transform: [{
// translateX: position.interpolate({
// inputRange: [index - 1, index, index + 1],
// outputRange: [width, 0, -width],
// }),
// }]
// };
const inputRange = [index - 1, index, index + 1];
const opacity = position.interpolate({
inputRange,
outputRange: ([0, 1, 0]),
});
const translateX = position.interpolate({
inputRange,
outputRange: ([width, 0, 0]),
});
return {
opacity,
transform: [
{ translateX }
],
};
//from center to corners
// const inputRange = [index - 1, index, index + 1];
// const opacity = position.interpolate({
// inputRange,
// outputRange: [0.8, 1, 1],
// });
// const scaleY = position.interpolate({
// inputRange,
// outputRange: ([0.8, 1, 1]),
// });
// return {
// opacity,
// transform: [
// { scaleY }
// ]
// };
}
});