React Native+TypeScript中StyleProp<ViewStyle>无width属性的问题排查

问题根源 #

你遇到的类型错误不是bug，核心原因是ViewProps里的style属性类型为StyleProp<ViewStyle>，这是一个联合类型：ViewStyle | ViewStyle[] | null | undefined，并非单纯的ViewStyle对象。直接解构width时，TypeScript无法确定style一定是包含width的对象，因此抛出类型错误。

解决方案 #

使用React Native内置的StyleSheet.flatten()方法，它可以将任意StyleProp类型转换为单一的ViewStyle对象（自动处理样式数组、null、undefined等情况），之后就能安全提取width属性。

修改后的代码示例：

import { View, ViewProps, StyleSheet } from 'react-native';

const DEFAULT_WIDTH = 300;

const WidgetContainer = ({ style, ...props }: ViewProps) => {
    // 将StyleProp转换为纯净的ViewStyle对象，空值时 fallback 为空对象
    const flattenedStyle = StyleSheet.flatten(style) || {};
    const { width = DEFAULT_WIDTH } = flattenedStyle;
    const widgetWidth = Math.floor(width / 3);

    return (
        <View style={[style, { width }]} {...props}>
            <WidgetRow widgetWidth={widgetWidth} />
        </View>
    );
};

补充说明 #

• Expo运行时能正常执行，是因为React Native会在运行阶段自动解析StyleProp的各种类型，但TypeScript在编译阶段会严格校验类型匹配，所以出现了运行正常但类型报错的差异。
• StyleSheet.flatten()是React Native专门用于处理样式联合类型的工具方法，完全适配你的使用场景。

内容的提问来源于stack exchange，提问作者Zac Delventhal