Question

我在React Native应用程序中使用bottomTabNavigator。我正在使用组件作为图标。可以在不显式定义大小的情况下使其适合标签（填充）吗？

如果没有，是否可以获取标签栏高度的常量？

这就是我得到的：

这是我的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

希望清除

如何使底部标签导航器的图标适合标签栏？

1 个答案: