React-Naivgation 侧滑动画配置以及单独配置

Posted 2021-12-04 iOSTianNan

目前基于

 "react-navigation": "^4.1.0",

先贴一下项目目前公共配置

/**
 *
 * @auther:  tiannanyihao
 * @date:  2020-10-13 17:53
 * @profile: StackConfig
 * @project: ebankhome-app
 * @description: 几个路由栈公共的config配置
 *
 */

import {CardStyleInterpolators} from 'react-navigation-stack/src/vendor/index';
import React from 'react';
import NavigationHeaderLeftComponent from '../../../components/global/NavigationHeaderLeftComponent';
import NavigationHeaderRightComponent from '../../../components/global/NavigationHeaderRightComponent';
import {themeColor} from '../../../common/common';
import {px2dp} from '../../../utils/px2dp';

// 公共的路由栈配置信息
export const commStackConfig = {
  // initialRouteName: 'CustomerFilePage',
  headerMode: 'screen',
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: themeColor.textColor0,
    },
    cardStyleInterpolator: CardStyleInterpolators.forNoAnimation, // 切换路由时水平动画
    headerTitleStyle: {
      fontSize: px2dp(32),
      color: themeColor.titleColor1,
      textAlign: 'center',
    },
    headerTitleAlign: 'center',
    headerBackTitleStyle: {
      textAlign: 'center',
    },
    headerLeft: () => <NavigationHeaderLeftComponent />,
    headerRight: () => <NavigationHeaderRightComponent />,
    headerBackAllowFontScaling: false,
    headerTitleAllowFontScaling: false,
    // headerBackTitle: '返回',
    // headerBackTitleStyle: {
    //   color: themeColor.titleColor,
    // },

    // headerBackImage: {
    //   tintColor: themeColor.titleColor,
    // },
    // headerTitleAlign: 'center',
  },
};

目前,侧滑动画已经关闭, 如果需要单独给某个页面配置,可以单独加上

     cardStyleInterpolator: CardStyleInterpolators.forHorizontalios, // 切换路由时水平动画

比如:

  B_TabNavigator: {
    screen: B_TabNavigator,
    navigationOptions: {
      // header: null,
      headerShown: false,
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // 切换路由时水平动画
    },