React Navigation V5/V6 路由修改screen背景色

你的代码我的心

于 2022-05-03 23:35:27 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签： react.js 前端 reactjs

本文链接：https://blog.youkuaiyun.com/weixin_41104307/article/details/124563865

React Native 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在ReactNavigation从V5迁移到V6过程中遇到的挑战，特别是关于Tab导航器背景透明度的设置。作者分享了在V5中设置透明背景的代码，并提供了V6版本的相应解决方法，帮助读者理解两个版本之间的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Navigation V5/V6 用法详解 ---参考文章

第一次写 RN 没想到全是坑，绝了！！为了实现以下的功能

在学习的过程中参考的是V5的写法，然而自己装的是V6! 这样学习起来也挺有意思的，一石二鸟。

v5 :

<Tab.Navigator sceenConstainerStyle={{backgroundColor:'transparent'}}>

v6:

直接看代码：

      <NavigationContainer
        theme={{
          dark: false,
          colors: {
            // 文字颜色: Header 标题 / BottomTab 未激活文字
            text: 'rgb(28, 28, 30)',
            // 激活颜色: BottomTab 激活文字 / iOS Header 返回上一页文字
            primary: 'rgb(99, 164, 252)',
            // 区块背景色: 如 Header, TopTab, BottomTab 背景
            card: 'rgb(255, 255, 255)',
            // 边框颜色: 如 Header, TopTab, BottomTab 边框
            border: 'rgb(216, 216, 216)',
            // 背景色: 页面整体背景颜色
            background: 'rgb(242, 242, 242,0)',
            // 提醒色: BottomTab 角标背景
            notification: 'rgb(255, 59, 48)',
          },
        }}>

        }}>

修改了大半天，终于找到了解决方案：