如何更改 StackNavigator 中动画的方向？

Question

如何在StackNavigator中改变动画的方向？

当前行为

当用户转到另一个屏幕时，屏幕从底部飞到顶部。

预期行为

当用户转到另一个屏幕时，屏幕从右飞到左。（喜欢 Facebook 或 Instagram！）

StackNavigator 代码

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
    // I guess we can do something here
});

如果能设置动画时间就更好了！目前看起来屏幕从屏幕中间飞到顶部。我想要像 Facebook 或 Instagram 这样的自然动画 :)

提前致谢，

Answer 1

用于反应导航 < 5.0

在 iOS 这是标准行为。 Android 需要一些配置。您可以使用两个选项来设置屏幕转换：mode 和 transitionConfig。在这种情况下 transitionConfig 将起作用：

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
// this path can be different depending on react-navigation version, this one is for @1.0.0-beta.15 

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
})

我们使用来自 react-navigation 源的 CardStackStyleInterpolator，但如果需要，您可以提供自定义转换，这里是如何制作 one or or this article.

mode 更适用于默认行为：

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
    ...
}, {
    mode: 'card',
    navigationOptions: ({navigation, screenProps}) => ({
        tabBarOnPress: blahblaj
    }),
    lazy: true
});

mode 只能有两个值：

card - 使用标准 iOS（从右到左）和 Android（从下到顶部）屏幕转换。这是默认值。
modal - 让屏幕从底部滑入，这是常见的 iOS 模式。仅适用于 iOS，对 Android.
无效

对于反应导航 >= 5.0:

import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
    
const Stack = createStackNavigator();
export default () => (
  <Stack.Navigator
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
    }}
  >
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
  </Stack.Navigator>
);

您可能还想使用 headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

更多信息在这里：https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

Answer 2

这里，我只是post我的回答，这样你就可以改变动画的方向了！就这样！您接受的答案只是默认！

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

export default StackNavigator ({
    Main: {
        screen: MainScreen,
    },
        ...
}, {
   transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
   }),
});

这样一来，两个平台的画面切换都是从右到左！你需要更多注意的是，你可以使用 transitionConfig props!

设置任何你想要的屏幕转换

Answer 3

更新的答案：

import ReactNavigation from "react-navigation";
createStackNavigator({...},{
  transitionConfig: () =>
    ReactNavigation.StackViewTransitionConfigs.SlideFromRightIOS
})

Answer 4

解决方法很简单。在 React 导航中 4.x 你可以这样做

import { createAppContainer } from 'react-navigation'
import { createStackNavigator, StackViewTransitionConfigs  } from 'react-navigation-stack';

const Navigation = createStackNavigator({
  screenA: ComponentA,
  screenB: ComponentB,
}, {
  mode: 'card',
  transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}

export const AppNavigation = createAppContainer(Navigation)

注意：您也可以在以前的 React 导航版本中实现这样的转换，但是您必须更改 import

Answer 5

对于 React 导航 > 5.0:

import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
    
const Stack = createStackNavigator();
export default () => (
  <Stack.Navigator
    screenOptions={{
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
    }}
  >
    <Stack.Screen name="Screen 1" component={ScreenComponent1} />
    <Stack.Screen name="Screen 2" component={ScreenComponent2} />
  </Stack.Navigator>
);

您可能还想使用 headerStyleInterpolator: HeaderStyleInterpolators.forUIKit

更多信息在这里：https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

Answer 6

动画按下或弹出时屏幕应如何设置动画。

支持的值：

默认：使用平台默认动画淡入淡出：淡入或淡出屏幕 fade_from_bottom: 从底部淡化新屏幕 flip: 翻转屏幕，需要 stackPresentation: "modal" (仅 iOS) simple_push：默认动画，但没有阴影和原生 header 过渡（仅限 iOS，在 Android 上使用默认动画） slide_from_bottom: 从底部滑入新屏幕 slide_from_right：从右侧滑入新屏幕（仅限 Android，在 iOS 上使用默认动画） slide_from_left：从左侧滑入新屏幕（仅限 Android，在 iOS 上使用默认动画） none: 不要动画屏幕仅支持 Android 和 iOS.

如何更改 StackNavigator 中动画的方向？

How to change the direction of the animation in StackNavigator?

animation

react-native

react-navigation

当前行为

预期行为

StackNavigator 代码