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组件中，我有像这样的项目：

<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的{{1}}

在TabBarIOS中使用图像〜低质量，Tint废墟图像

1 个答案: