TabBarIOSで画像を使用する〜低品質、色合いの遺跡画像

Question

私たちは、反応ネイティブを使用しているiOSアプリケーションで作業しています。このアプリケーションでは、TabBarIOSコンポーネントを使用しています。私たちは、アクティブなタブに別々のアイコンを持っている5つのタブを持って、私たちの画像のレイアウトは、このようなものです：アクロス

<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> 

：私はそうのようなアイテムをdecaredいる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) 

iPhone4s、iPhone5、iPhone6s +アイコンはすべて低品質ですが、選択されていない場合は灰色の色合いで覆われているため、画像が完全に消えてしまいます。選択すると、青色のデフォルトの色調で覆われます。色合いをtransparentに設定しようとしましたが、アクティブなときにタブアイコンが非表示になりました。

この色付けは、タブバーのアイコンを設定することが過度に簡単だったはずなので、私たちが最後に断念したことの1つだったので、私たちを元通りに戻しました。それは大きな大騒ぎの1つになっています。

以前はUIWebViewを使用していましたが、シャープネスのために512x512の画像をサイズに縮小しました。私はこれらの小さいアイコンが本当に低品質であるかどうか、またはぼかしがTabBarIOSコンポーネント自体によって提示されているかどうかはわかりません。

EDIT：アイコン上ネーミングの問題が修正されました、色のアイコンを胸が張り裂けるに問題がさえrenderAsOriginal

Answer 1

あなたのイメージのための第一の使用後も継続Uは右それらに名前を付けていなかった、それは次のようになります。

|_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) 

システムは低品質を取得し、低品質の画像につながるすべての網膜デバイスに適用します。色合いの色について

、 はTabBarIOS.Itemにこのpropを追加しよう：

renderAsOriginal={true}; 

TabBarのアイコンの下に表示されるテキストのみtintColorので、Uを介して行われるという事実を認識してください。 uはselectedとunSelectedのためにしたいだけでなく、それはあなたが表示され、TabBarIOSコンポーネントの小道具としてselectedとunSelected