0

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

4

1 に答える 1