React Native：如何在没有硬编码值的情况下使底部导航栏图标具有正确的大小？

Question

我为我的 React Native 应用程序创建了一个底部选项卡导航栏。 我使用的图标是导入的图片。

问题是：如何在不硬编码宽度和高度值的情况下使图标在所有设备上都具有正确的大小？

目前，这些值是硬编码的，但我确信这不是最佳做法：

return <Image style={{ width: 30, height: 30 }} source={iconName}/>;

我也尝试过通过导入Dimensions 来执行此操作，但无论我在* x 中输入什么，图标看起来都不正确：

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

....

return <Image style={{ width: windowWidth * 0.1, height: windowHeight * 0.05 }} source={iconName}/>;

有什么想法吗？或者如果我留下硬编码的值会好吗？

Answer 1

你可以使用这个类并在你的整个应用中使用这个组件

export const HEIGHT = Dimensions.get('window').height;
export const WIDTH = Dimensions.get('window').width;

export const getResponsiveHeight = (per) => {
    return ((HEIGHT * per) / 100);
}

export const getResponsiveWidth = (per) => {
    return ((WIDTH * per) / 100);
}

例如： 如果你想使用 getResponsiveHeight 那么你必须像这样使用它

width:getResponsiveHeight(0.5)

per 这里是值 0.5

你可以根据你的要求传递值。