场景之间的react-native-router-flux导航方向

Question

版本： 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）时，方向是从左到右的（感觉像是单击后退按钮）。我希望这是从右到左的法线方向。

有什么建议吗？

Answer 1

您可以使用如下所示的自定义过渡效果，并根据需要进行修改：

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 }
            //     ]
            // };
        }
    });