在 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 decared 如下：

<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 之后，在颜色中渲染图标的问题仍然存在

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 的图标以及tintColor 对应于 selected 和 unSelected