Question

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

当前行为

当用户转到另一个屏幕时，屏幕会从从下到上飞行。

预期行为

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

StackNavigator Code

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

如果我们可以设置动画时间，它会更好！目前看起来屏幕从屏幕中间飞到顶部。我想要像Facebook或Instagram这样的自然动画：）

提前致谢，

Answer 1

对于React Navigation 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>
);

此处有更多信息：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,
   }),
})

我们使用来自反应导航源的CardStackStyleInterpolator，但您可以根据需要提供自定义转换，以下是one或here或this article。< / p>

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 CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';

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

通过这种方式，屏幕转换将在两个平台上从右到左！你需要多注意的是你可以使用transitionConfig道具设置任何你想要的屏幕过渡！

Answer 4

更新的答案：

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

Answer 5

解决方案非常简单。在React Navigation 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

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

当前行为

预期行为

StackNavigator Code

5 个答案: