Image.resizeMode在反應本機中無法正常工作

Question

我按照說明（https://facebook.github.io/react-native/docs/image.html）使用Image.resizeMode調整圖像大小以適合視圖的內容。以下是我的代碼。

import React, {Component} from 'react'; 
    import {View, Image,StyleSheet, Dimensions} from 'react-native' 
    import TabNavigator from 'react-native-tab-navigator'; 

    class MainComponent extends Component { 

    render() { 
     return (
      <TabNavigator tabBarStyle={style.tab}> 
       <TabNavigator.Item 

        title="護士說" 
        renderIcon={()=> <Image source={require('../../icons/main/tab-button_01_pre.png') } 
             resizeMode={Image.resizeMode.cover}/>} 

        > 
       </TabNavigator.Item> 


      </TabNavigator> 

     ) 
    } 
} 

const screenHeight = Dimensions.get('window').height; 

const style=StyleSheet.create({ 
    tab: { 
     alignSelf: 'stretch', 
     height: screenHeight * 0.1 
    } 
}) 


export default MainComponent 

下面是我的應用程序的屏幕截圖。底部的圖像被剪下。我曾嘗試將Image.resizeMode設置爲Image.resizeMode.cover，Image.resizeMode.contain和Image.resizeMode.stretch。所有這些在展示圖像方面沒有任何不同。我的代碼有什麼問題？如何設置圖像大小以適應標籤欄的高度？

Answer 1

使用uiautomatorviewer檢查我發現，在圖像高度比導航項目更大的視圖佈局之後。所以，現在在圖像上添加下面的樣式後。

image: { 

    height: screenHeight * 0.05 
}