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：

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

在 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 或 here 或 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 无效。

Answer 3

更新答案：

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

Answer 4

在这里，我只是发布我的答案，以便您可以更改动画的方向！就这样！您接受的答案只是默认的！

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

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

这样，两个平台上的画面转换都会变成从右到左！ 需要注意的是，你可以使用transitionConfig props 设置任何你想要的屏幕转换！

Answer 5

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

导入 { createAppContainer } from 'react-navigation'
从 'react-navigation-stack' 导入 { createStackNavigator, StackViewTransitionConfigs }；

常量导航 = createStackNavigator({
  屏幕A：组件A，
  屏幕B：组件B，
}, {
  模式：'卡'，
  transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,
}

export const AppNavigation = createAppContainer(Navigation)

注意：你也可以在以前的 react 导航版本中实现这种转换，但你必须更改 import