Изображение.resizeMode не работает должным образом в react-native

Я последовал инструкции( https://facebook.github.io/react-native/docs/image.html ) при использовании изображения.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

Ниже приведен скриншот моего приложения. Изображение внизу было обрезано. Я попробовал с изображением.resizeMode, чтобы быть изображение.resizeMode.изображение обложки.resizeMode.содержать и изображение.resizeMode.протяжение. Все они не имеют никаких различий при показе изображения. Что не так с моим кодом? Как установить размер изображения в соответствии с высотой панели вкладок?

Введите описание изображения здесь

1 ответ

  1. После использования uiautomatorviewer для проверки макета вида я обнаружил, что высота изображения больше, чем элемент навигации. Поэтому после добавления стиля ниже на изображении он работает сейчас.

    image: {
    
        height: screenHeight * 0.05
    }