0

我们正在使用 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

4

1 回答 1

2

首先对于您的图像，您没有正确命名它们，它应该是：

|_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将仅通过 the 生效，tintColor因此您需要根据需要管理图标，以及forselected和unSelectedtintColorselectedunSelected

于 2016-09-17T16:22:58.660 回答