Question

我想知道将填充和边距设置为响应值是否是在React Native中执行操作的正确方法。

例如，假设我有一个Button组件。我的按钮组件具有填充，其中的文本应具有响应性。我已经使用我的自定义函数（下面的代码）将文本作为响应进行处理，并且可以正常工作，这里的问题是，如果一个人以很小的尝试尝试该应用程序，则按钮内的文本看起来很酷，但是与文本大小相比，填充空间太大，因为我设置的是固定值。因此，使用与计算文本大小相同的函数来计算填充也是正确的吗？

我的响应大小计算功能：

const scale = width / 375

export const normalize = (size: number): number => {
    const newSize = size * scale

    if (Platform.OS === 'ios') {
        return Math.round(PixelRatio.roundToNearestPixel(newSize))
    } else {
        return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
    }
}

Answer 1

react-native-responsive-fontsize用于调整字体大小，但是基本上它用于具有自动余量填充字体的像素，而我基本上想要使用像素（px）动态调整大小的任何东西

例如

    import { RFValue } from "react-native-responsive-fontsize";

    {
       fontSize: RFValue(14),
       padding: RFValue(10)
    }

但是如果要手动控制它，则可以使用“尺寸标注”

例如

import { Dimensions } from "react-native"; 


const width = Math.round(Dimensions.get('window').width);

那你就可以做你的东西

const scale = width / 375

export const normalize = (size: number): number => {
    const newSize = size * scale

    if (Platform.OS === 'ios') {
        return Math.round(PixelRatio.roundToNearestPixel(newSize))
    } else {
        return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
    }
}

反应本机响应边距和填充

1 个答案: