React-Navigation 4.x 安卓仿iOS 切换页面样式设置 push/native

最新推荐文章于 2024-09-01 08:22:02 发布

iOSTianNan

最新推荐文章于 2024-09-01 08:22:02 发布

阅读量543

点赞数

分类专栏： JavaScript react-native 文章标签： js react-Naviga

本文链接：https://blog.youkuaiyun.com/iOSTianNan/article/details/105820205

版权

react-native 同时被 2 个专栏收录

41 篇文章

订阅专栏

JavaScript

34 篇文章

订阅专栏

React-Navigation 4.x 使用
 官网

在这里插入图片描述

注意 CardStyleInterpolators 导入的地址是

import {CardStyleInterpolators} from 'react-navigation-stack/src/vendor/index'

使用

{
    // initialRouteName: 'CustomerFilePage',
    headerMode: 'screen',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: themeColor.textColor0,
      },
      cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // 切换路由时水平动画
      headerTitleStyle: {
        fontSize: 18,
        color: themeColor.titleColor,
        textAlign: 'center',
      },
      headerTitleAlign: 'center',
      headerBackTitleStyle: {
        textAlign: 'center',
      },
      headerLeft: () => <NavigationHeaderLeftComponent/>,
      headerRight: () => <NavigationHeaderRightComponent/>,
      // headerBackTitle: '返回',
      // headerBackTitleStyle: {
      //   color: themeColor.titleColor,
      // },

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