Как я могу гарантировать, что все мои маршруты React Navigation имеют одинаковую анимацию? - PullRequest
1 голос
/ 21 июня 2019

Я настроил несколько анимированных маршрутов в 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 Native Component.

Анимация при нажатии на исходный маршрут (в данном примере маршрут PortfolioScreen) проходит по всем маршрутам в стеке, и это видно в анимации.

ЗдесьGIF-изображение, показывающее ошибку.Это последняя кнопка, которую я нажимаю (после красного экрана), которая сбрасывает стек и анимирует странным образом.

the animation

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...