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 
}