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

​