1

我已经使用 React Native 0.59 设置了一些动画路线，react-native-navigation并且我想知道我可以做些什么来确保每条路线的动画都完全相同，而不管路线堆栈如何。

我已经修改过，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课程由基本的扩展 React NativeComponent课程组成。

单击返回初始路由（在此示例中为PortfolioScreen路由）时的动画会遍历堆栈中的所有路由，并且在动画中可见。

这是显示错误的 .gif 图像。这是我按下的最后一个按钮（在红色屏幕之后），它重置堆栈并以一种奇怪的方式设置动画。

动画

先感谢您。

4

0 回答 0