react navigation StackNavigator 如何定义跳转时不同的动画效果

Question

mode: 'modal' 有什么方法可以给单个页面设置呢

Answer 1

默认有安卓与ios的效果，安卓是底部向上的动画，iOS是右到左的动画，可以在这里定义：

transitionConfig:()=>({
        //重新设置页面切换动画
        screenInterpolator:solidUp,
    }),

这个配置在StackNavigator中配置！

Answer 2

//实现定义某个页面的动画效果
const TransitionConfiguration = () => {
    return {
        transitionSpec: {
            duration: 300,
            easing: Easing.linear(),
            timing: Animated.timing,
        },
        screenInterpolator: (sceneProps) => {
            const {scene,scenes } = sceneProps;
            const { route,index } = scene;
            const params = route.params || {};
            const transition = params.transition || 'forHorizontal';
            // console.log('route',route.routeName);
            // console.log('scenes',scenes);
            // console.log('scene',scene);
            // console.log('index',index);

            // if(route.routeName.indexOf('OverTimeApply')>=0){
            //     return forVerticalTop(sceneProps);
            // }else if(route.routeName.indexOf('OverTimeHolidaysApply')>=0){
            //     return forHorizontalLeft(sceneProps);
            // }else if(route.routeName!=='OverTimeApply'&&route.routeName!=='OverTimeHolidaysApply'){
            //     // console.log('没有动画');
            //     return CardStackStyleInterpolator[transition](sceneProps);
            // }else{
            //     return null;
            // }
            switch (transition){
                case 'forVerticalTop':
                    return forVerticalTop(sceneProps);

                case 'forHorizontalLeft':
                    return forHorizontalLeft(sceneProps);
                case 'freeStyle':
                    return freeStyle(sceneProps);
                default:
                    return CardStackStyleInterpolator[transition](sceneProps);
            }
        },
    };
};

const AppNavigator = StackNavigator(
    {
        ...Routes,
        Index: {
            screen: Launch,
        },
    },
    {
        initialRouteName: 'Index',
        headerMode: 'screen',
        transitionConfig: TransitionConfiguration,
        navigationOptions: ({navigation}) => StackOptions({navigation}),
    }
);

 this.props.navigation.navigate('Vacation', {transition:forVerticalTop});

全部代码：https://github.com/wuyunqiang...

Answer 3

可以参考下面的代码：

完整代码在这：https://github.com/xiaogliu/r...

demo展示：http://ol9ge41ud.bkt.clouddn....

/**
 * 自定义 StackNavigator，可以选择 screen 进入方式
 * 默认状态为 card，只需要输入对应页面，比如 ..navigate('ScreenSome1')
 * 如果要使某个页面进入方式为 modal 只需要在路径上加上 Modal
 * 比如：..navigate('ScreenSome2Modal')
 */

const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = StackNavigator(routeConfigs, navigatorConfig);
  const modalRouteConfig = {};
  const routeNames = Object.keys(routeConfigs);

  for (let i = 0; i < routeNames.length; i++) {
    modalRouteConfig[`${routeNames[i]}Modal`] = routeConfigs[routeNames[i]];
  }

  const ModalStackNavigator = StackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig,
    },
    {
      // 如果页面进入方式为 modal，需要自定义 header（默认 header 样式失效，都叠在一块了）
      mode: 'modal',
      headerMode: 'none',
    },
  );

  return ModalStackNavigator;
};