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

您可以使用此 class 并在您的整个应用程序中使用此组件

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

你可以根据自己的需要传值。

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

React Native: How do I make the bottom navbar icons have the correct size without hardcoded values?

image

react-native

icons

size

react-navigation-bottom-tab