如何确保我的所有React Navigation路线都具有完全相同的动画?

时间:2019-06-21 04:30:57

标签: javascript reactjs react-native react-navigation react-navigation-stack

我已经使用react-native-navigation在React Native 0.59中设置了一些动画路线,并且我想知道如何做才能确保每个路线的动画完全相同,而与路线堆栈无关。

我已经修改了StackActions.reset(),但是它只会负面影响我的应用程序的性能,并从整体上删除了动画,因此我选择不使用它。我认为可能缺少一些代码,或者可能需要检修整个路由系统。

我已经包含了一些我正在使用的代码:

这是我完整的NavigationManager.js课程:

import { NavigationActions } from "react-navigation";

export default class NavigationManager {

    navigator = null; // The navigator itself.

    /**
     * Function for setting the navigator (generally top reference).
     */
    static set(ref) {
        navigator = ref; // Set the navigator.
    }

    /**
     * Function for going to the desired screen.
     */
    static go(routeName, params) {
        navigator.dispatch(NavigationActions.navigate( { routeName, params } ));
    }
}

这是我在SwitchBoard.js类中的实现:

const AppStack = createStackNavigator({
    Portfolio : PortfolioScreen,
    Home : HomeScreen,
    Search : SearchScreen,
    Settings : SettingsScreen,
}, {
    defaultNavigationOptions : {
        gesturesEnabled: false,
    }, headerMode : "none",
    transitionConfig : () => ({
        transitionSpec : {
            duration : 400,
            easing : Theme.ANIMATION_EASING,
            timing : Animated.timing,
        }, screenInterpolator : sceneProps => {
            const { layout, position, scene } = sceneProps;
            const { index } = scene; // The index of the stack.

            const opacity = position.interpolate({
                inputRange : [index - 1, index, index + 1],
                outputRange : [0, 1, 1],
            });

            return { opacity };
        },
    }),
});

const Container = createAppContainer(
    createSwitchNavigator({
        AppStack : AppStack,
    })
);

我的Screen类由基本的扩展本机Component类组成。

单击初始路线(在本示例中为PortfolioScreen路线)时,动画会遍历堆栈中的所有路线,并且在动画中可见。

这是显示该错误的.gif图像。这是我按下的最后一个按钮(在红色屏幕之后),它重置堆栈并以一种奇怪的方式进行动画处理。

the animation

谢谢。

0 个答案:

没有答案