Image.resizeMode在react-native

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上添加以下样式后，它现在可以正常工作。

image: {

    height: screenHeight * 0.05
}