react-native - react 导航: Applying separate transitions to scenes

Question

我想对我的 React Native (iOS) 应用程序的 React Navigation 中的 StackNavigator 中的场景应用不同的过渡。

export const AppNavigator = StackNavigator({
  Home: { screen: Home },
  NewChild: { screen: NewChild },
  Journal: { screen: Journal }
});

我可能希望 NewChild 从下向上加载，就像模态一样。或者我可能希望它从右向左滑入。如果这个可以定制就太好了。从文档来看，您似乎只能将 StackNavigation 设置为卡片或模态。

Answer 1

感谢线程中的每个人，它对我有用。

我有许多场景仅由一个 StackNavigator 管理，我想为其中一些制作不同的动画。

首先，我在路由器中将自己设置为常量，其中包括我想要通过水平过渡显示的每个场景:

const horizontalTransitionScenes = [
  AddContact,
];

之后，我使用 StackNavigator 设计了我的应用程序路由器:

const App = StackNavigator({
  AddContact: {
    screen: AddContact,
  },
  EditContact: {
    screen: EditContact,
  },
});

我使用CardStackStyleInterpolator来修改场景之间的过渡。我可以这样导入: import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

我们现在可以向 StackNavigator 添加 transitionConfig 参数，以根据场景显示不同的动画:

 const App = StackNavigator(
{
    AddContact: {
        screen: AddContact
    },
    EditContact: {
        screen: EditContact
    }
},
{
    transitionConfig: (currentState: any) => {
        if (
            currentState.scenes[
                currentState.scenes.length - 1
            ].route.routeName.includes(horizontalTransitionScenes)
        ) {
            return {
                screenInterpolator: CardStackStyleInterpolator.forHorizontal
            };
        }
        return {
            screenInterpolator: CardStackStyleInterpolator.forVertical
        };
    }
}
);

通过 StackNavigator 实现，您将能够为您想要的场景显示不同类型的动画。

祝你有美好的一天🎉