Как сделать так, чтобы значок навигатора нижней вкладки помещался внутри панели вкладок?

Question

Я использую bottomTabNavigator в своем приложении React Native. Я использую компонент в качестве значка. Можно ли сделать так, чтобы он помещался внутри вкладки (с отступом) без явного определения размера?

Если нет, есть ли некоторая постоянная, в которой я могу получить высоту панели вкладок?

Это вот что я получаю:

и это мой код tabBarIcon:

/**
 * 
 */
import React from 'react';
import {
    Image,
    Text,
    StyleSheet,
} from 'react-native';

export default class TabMenuIcon extends React.Component {

    static SCREENS = {
        SOCIAL: "s",
        CALCULATION: "c",
        CONFIGURE: "d"
    };

    render() {

        const { focused, tintColor, size, which } = this.props;

        switch(which) {
            case TabMenuIcon.SCREENS.SOCIAL:
                return <Image source={require('../assets/icons/tabsocial.png')} style={style.img} />
                break;
            case TabMenuIcon.SCREENS.CALCULATION:
                return <Image source={require('../assets/icons/tabcalculations.png')} style={style.img} />
                break;
            case TabMenuIcon.SCREENS.CONFIGURE:
                return <Image source={require('../assets/icons/tabconfigure.png')} style={style.img} />
                break;
            default:
                return <Text>t</Text>
        }
    }
}

const style = StyleSheet.create({
    img: {
        padding:6, // Does nothing??
        margin: 4, // Does nothing??
    }
});

Answer 1

То, что я имею в виду, не жестко кодирует высоту изображения, скорее вы можете проверить высоту изображения в вашем симуляторе и предположить, что вы задаете высоту и ширину равными 10.

Это идеально подходит для предположения. Затем, чтобы убедиться, что только 10 не повредят мое изображение в других телефонах с другим разрешением экрана, которое вы можете сделать,

height = (10/640) * deviceHeight
width = (10/360) * deviceWidth. 

здесь я предполагаю, что высота и ширина вашего телефона - 640 и 360 соответственно.

Вы можете получить высоту и ширину устройства следующим образом:

import {Dimensions} from 'react-native;
deviceWidth =  Dimensions.get('window').width,
deviceHeight=  Dimensions.get('window').height

надеюсь, это очистит