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

【问题标题】：iOS overrides the `navBarButtonColor` when using PNGsiOS 在使用 PNG 时会覆盖 `navBarButtonColor`
【发布时间】：2018-06-27 13:03:58
【问题描述】：

问题描述

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

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

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

我尝试将navBarButtonColor 设置为null、transparent，但似乎没有任何效果。

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

复制步骤/代码片段/屏幕截图

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

环境

React Native Navigation 版本：1.1.473
React Native 版本：0.55.3
平台（iOS、Android 或两者？）：iOS
设备信息（模拟器/设备？操作系统版本？调试/发布？）：Android Emulator on Debug

【问题讨论】：

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

【解决方案1】：

在 iOS 上，UIBarButtonItem 使用使用源图像的 Alpha 通道创建的图像。要显示实际图像（不是它的 alpha 通道遮罩），您需要将图像的渲染模式更改为 alwaysOriginal

虽然，看着React Native Image class documentation我看不到renderingMode属性

【讨论】：

【解决方案2】：

我们已设法找到解决此问题的方法。通过将disableIconTint 按钮属性设置为true，它会禁用图标颜色覆盖。请参阅以下示例：

static navigatorButtons = {
    leftButtons: [
        {
            id: 'back-nav-button',
            icon: require('../assets/images/icons/arrow-left.png'),
            disableIconTint: true // Add this line to use the PNG's color
        }
   ]
};

【讨论】：