本机反应:如何使底部导航条图标在没有硬编码的情况下具有正确的大小？
本机反应:如何使底部导航条图标在没有硬编码的情况下具有正确的大小？
提问于 2021-01-27 18:01:17
我已经创建了一个底部Tab从我的反应本土应用程序。我使用的图标是导入的图像。
问题是:如何使图标在所有设备上都具有正确的大小，而不对宽度和高度的值进行硬编码？
现在，这些值都是硬编码的，但我确信这不是最佳实践：
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}/>;有什么想法吗？或者，如果我保留硬编码值，情况会好吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-28 03:54:06
您可以在整个应用程序中使用这个类并使用这个组件。
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)每这里是值0.5
您可以根据需要传递值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65924776
复制相关文章
相似问题
腾讯云开发者
