iOS 在使用 PNG 时会覆盖 `navBarButtonColor`

标签 ios reactjs react-native react-native-navigation wix-react-native-navigation

问题描述

在我的应用程序中,我有一个导航栏搜索按钮设置如下:

static navigatorButtons = {
    leftButtons: [
        {
            id: 'back-nav-button',
            icon: require('../assets/images/icons/arrow-left.png')
        }
   ]
};

该按钮在 iOS 和 Android 上均按预期工作,但在 iOS 上该按钮为蓝色。我知道这是所需的行为,并且可以通过设置 navBarButtonColor 来覆盖颜色,但问题是它是一个多色按钮 - 这意味着我希望按钮只包含 PNG 图像的颜色,而不是 navBarButtonColor .

我试过设置navBarButtonColornull , transparent ,但似乎没有任何效果。

所以我的问题是,有没有办法让导航栏图标呈现所提供的 PNG 的颜色,就像在 Android 上一样?

重现步骤/代码片段/屏幕截图

只需简单的 static navigatorButtons = ... 在 iOS 上运行任何 RNN 应用程序即可使用本地多色 PNG,您会看到图标的颜色被覆盖。

环境
  • React Native Navigation 版本:1.1.473
  • React Native 版本:0.55.3
  • 平台(iOS、Android 或两者?):iOS
  • 设备信息(模拟器/设备?操作系统版本?调试/发布?):Android Emulator on Debug
  • 最佳答案

    在 iOS 上,UIBarButtonItem使用使用源图像的 Alpha channel 创建的图像。要显示实际图像(不是它的 alpha channel mask ),您需要将图像的渲染模式更改为 alwaysOriginal
    虽然,看着 React Native Image class documentation我看不到 renderingMode属性(property)

    关于iOS 在使用 PNG 时会覆盖 `navBarButtonColor`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51063531/

    相关文章:

    javascript - React Native 中应用被杀死后存储数据的数据库

    iphone - Storyboard奇怪的 Controller View 框架起源

    ios - 打开邮件、消息、Twitter 或 Facebook 等系统应用程序时,不会调用 UIDocumentInteractionControllerDelegate 方法

    ios - 加载后如何从 View 访问属性

    javascript - props 改变后的 setState

    macos - µWebSockets 的 React Native OSX CRNA 编译未能通过 C++11 编译器

    node.js - React Native package.json 版本

    ios - 与 Interface Builder 连接,但 UITableView 为零?

    javascript - PropTypes 形状被标记为需要

    javascript - 将额外的 props 传递给 React 组件