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 这样的自然动画 :)

提前致谢，

原文由 merry-go-round 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 ，但是您可以根据需要提供自定义转换，这里是如何制作 一个 或 这里 或 本文。

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

原文由 zarcode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于反应导航 > 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

原文由 Daniel Loiterton 发布，翻译遵循 CC BY-SA 4.0 许可协议