Question

有没有办法在react-navigation中使用navigate（）函数实现从左到右的动画？

提前致谢。

Answer 1

在{@ {3}}中，在gestureDirection: 'horizontal-inverted'中使用defaultNavigationOptions/navigationOptions在react-navigation / stack github存储库中

Screen: {
  screen: Screen,
  navigationOptions: {
    ...TransitionPresets.SlideFromRightIOS,
    gestureDirection: 'horizontal-inverted',
  },
},

下面的相关链接：

satya164

https://github.com/react-navigation/stack/issues/377#issuecomment-578504696

Answer 2

定义屏幕时，可以使用transitionConfig选项。

const Stack = StackNavigator(
  {
    SomeScreen: { screen: ... },
  },
  {
    transitionConfig: customAnimationFunc,
  }
);
...

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

const customAnimationFunc = () => ({
  screenInterpolator: sceneProps => {
    return CardStackStyleInterpolator.forVertical(sceneProps);
  },
});

应该做的工作。您当然可以定义自己的动画，或者返回null以禁用它;检查来源。

Answer 3

我知道这很旧，但是我也很难找到一种配置，一次只能在一个屏幕上执行此操作，最终使用了react-navigation-transitions。

import {createStackNavigator} from 'react-navigation-stack';
import {fromLeft, fromRight} from 'react-navigation-transitions';
import {ScreenA, ScreenB, ScreenC} from 'screens'; 

export const handleCustomTransition = ({scenes}) => {
  const prevScene = scenes[scenes.length - 2];
  const nextScene = scenes[scenes.length - 1];

  if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenB'
  ) {
    return fromLeft();
  } else if (
    prevScene &&
    prevScene.route.routeName === 'ScreenA' &&
    nextScene.route.routeName === 'ScreenC'
  ) {
    return fromRight();
  }
};

const stack = createStackNavigator(
  {
    ScreenA: homeScreen,
    ScreenB: messageScreen,
    ScreenC: settingsScreen,
  },
  {
    transitionConfig: nav => handleCustomTransition(nav),
  }
);

从左到右的窗口动画与反应导航？

3 个答案: