Использование изображений в TabBarIOS ~ Низкое качество, изображение с оттенками руин

Question

Мы работаем над iOS-приложением, использующим реагирующее. В этом приложении мы используем TabBarIOS составная часть. У нас есть пять вкладок, которые имеют отдельные значки для активной вкладки, расположение наших изображений выглядит следующим образом:

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ [e-mail]        (70x70)
|___ [e-mail]        (105x105)
|___ tab-1-off.png         (35x35)
|___ [e-mail]       (70x70)
|___ [e-mail]       (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)
|___ [e-mail]        (70x70)
|___ [e-mail]        (105x105)
|___ tab-1-off.png         (35x35)
|___ [e-mail]       (70x70)
|___ [e-mail]       (105x105)

Система взяла более низкое качество и применила его ко всем сетчаткам, что приводит к низкому качеству изображений.

О цвете оттенка, попробуйте добавить это prop к TabBarIOS.Item:

renderAsOriginal={true};

Обратите внимание, что текст под значком TabBar будет осуществляться только через tintColor так что вам нужно управлять значком, как вы хотите для selected а также unSelected так же хорошо как tintColor за selected а также unSelected