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

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)',
          },
        }}>

        }}>

修改了大半天,终于找到了解决方案:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React v6中的路由使用react-router-dom库进行管理。通过使用以下命令安装该库:`yarn add react-router-dom@6`。 相较于之前的版本,V6版本的react-router-dom进行了一些改进。嵌套路由的写法有所改变,并且引入了新的钩子函数useNavigate来替代useHistory,使整体更易于理解。 React中有三种常用的路由方式:react-router-dom适用于浏览器的路由,BrowerRouter基于浏览器的history,HashRouter基于地址部分的hash值(路由带“#”)。而react-router-native适用于原生app的路由react-router是原生与浏览器通用的部分。 在React v6中,你可以使用`yarn add react-router-dom@6`来安装React Router。安装后,你可以使用`BrowserRouter`组件来创建基于浏览器的路由,或者使用`HashRouter`组件来创建基于地址栏hash值的路由。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [React-Router V6 使用详解](https://blog.csdn.net/zjjcchina/article/details/121921585)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [【React学习】React路由 v6](https://blog.csdn.net/zx1041561837/article/details/125970331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值