ios - 在 TabBarIOS 中使用图像 ~ 低质量，色调破坏图像

Question

我们正在使用 react-native 开发一个 iOS 应用程序。在此应用程序中，我们使用了 TabBarIOS 组件。我们有五个标签，每个标签都有单独的事件标签图标，我们的图像布局如下:

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ tab-1-on@2.png        (70x70)
|___ tab-1-on@3.png        (105x105)
|___ tab-1-off.png         (35x35)
|___ tab-1-off@2.png       (70x70)
|___ tab-1-off@3.png       (105x105)

在 TabBarIOS 组件中，我像这样声明了 Items:

<TabBarIOS.Item
    selected={currentTab.name === 'profile'}
    icon={require('./images/tabbaricons/profile-off.png')}
    selectedIcon={require('./images/tabbaricons/profile-on.png')}
    renderAsOriginal={true}
    title="" 
    onPress={() => {
        this.props.navigation.gotoTab({
            tabInformation: { name: 'profile', content: '' },
            statusBarStyle: 'light-content'
        })
    }}>
    <Profile navigator={this.props.navigator} navigation={this.props.navigation />
</TabBarIOS.Item>

在 iPhone4s、iPhone5 和 iPhone6s+ 中，图标都是低质量的，如果不选择它们，它们也会被灰色覆盖，这完全破坏了图像。选择后，它们会被蓝色默认色调覆盖。我尝试将色调颜色设置为 transparent 但这使得选项卡图标在处于事件状态时不可见。

这种着色完全让我们失望，因为在选项卡栏中设置图标是我们推迟到最后的事情之一，因为它应该过于简单。事实证明这是更大的麻烦之一。

之前我们使用 UIWebView 并将 512x512 图像缩小到清晰度大小。我不知道这些较小的图标是否真的质量很差，或者 TabBarIOS 组件本身是否表现出模糊性。

编辑: 图标的命名问题已修复，即使在使用 renderAsOriginal

后，以 Color 呈现图标的问题仍然存在

Answer 1

首先对于你的图片，你没有正确命名它们，应该是:

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ tab-1-on@2x.png        (70x70)
|___ tab-1-on@3x.png        (105x105)
|___ tab-1-off.png         (35x35)
|___ tab-1-off@2x.png       (70x70)
|___ tab-1-off@3x.png       (105x105)

系统采用了较低的质量并将其应用于所有视网膜设备，这导致了低质量的图像。

关于色调，尝试将此 prop 添加到 TabBarIOS.Item:

renderAsOriginal={true};

请注意，TabBar 图标下的文本将仅通过 tintColor 生效，因此您需要根据需要管理图标selected 和 unSelected 以及 selected 和 unSelected 的 tintColor