react-native を使用して iOS アプリケーションに取り組んでいます。このアプリケーションでは、TabBarIOS
コンポーネントを利用しています。アクティブなタブに個別のアイコンを持つ 5 つのタブがあり、画像のレイアウトは次のようになります。
|_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
たが、アクティブなときにタブアイコンが見えなくなりました。
タブバーにアイコンを設定することは、単純すぎるはずだったので、最後に延期したことの 1 つだったので、この色合いは完全に私たちを後退させます。それはより大きな問題の1つであることが判明しています。
以前は、UIWebView を使用し、鮮明にするために 512x512 の画像を縮小していました。これらの小さなアイコンが本当に低品質なのか、それとも TabBarIOS コンポーネント自体がぼやけているのか、私にはわかりません。
編集:アイコンの名前付けの問題が修正されました。renderAsOriginal