React Native自定义输入组件设置width: fit-content遇TS类型错误

问题原因 #

react-native-unistyles的DimensionValue类型默认未包含CSS值"fit-content"，但React Native本身已经支持这个属性值，直接编写会触发类型不兼容错误。

解决方案 #

方案1：类型断言（快速临时解决） #

在设置width时使用TypeScript类型断言，强制指定其类型为DimensionValue：

const stylesheet = createStyleSheet(theme => ({
    iconInputWrapper: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: theme.padding.base,
        paddingVertical: 0,
        gap: theme.gap.base,
        width: "fit-content" as DimensionValue, // 添加类型断言
    },
    icon: {
        color: theme.colors.destructive
    }
}));

方案2：扩展Unistyles全局类型（优雅持久解决） #

在项目根目录创建一个类型声明文件（比如react-native-unistyles.d.ts），扩展DimensionValue类型，将"fit-content"加入允许的值列表：

import 'react-native-unistyles';

declare module 'react-native-unistyles' {
    export interface DimensionValue {
        // 扩展类型，添加fit-content
        'fit-content': string;
    }
}

完成后，项目内任何地方使用width: "fit-content"都不会再触发类型错误。

内容的提问来源于stack exchange，提问作者Ritik Jangir