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

Posted 2022-02-02 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, // 切换路由时水平动画
    ,