React Native自定义组件接收StyleSheet样式显示随机数字问题排查

你看到的"随机数字"其实是React Native中StyleSheet.create生成的样式引用ID，并非真正的样式对象。React Native为了优化性能，会将StyleSheet创建的样式编译成内部ID，而非直接传递原始对象，所以直接解构这个ID肯定会出错；而手动传入的{width:100}是普通JS对象，自然能正常解析。

1. 修正Props类型定义 #

首先把CustomButton的style类型从object改成React Native官方提供的样式类型，让TypeScript帮你做类型校验：

import { StyleProp, ViewStyle } from 'react-native';

interface ButtonProps {
    style?: StyleProp<ViewStyle>; // 替换原来的object类型
}

2. 正确合并样式 #

React Native组件的style属性支持传入样式数组来合并样式，不需要手动解构对象，直接把基础样式和传入的样式放在数组里即可：

export const CustomButton: React.FC<ButtonProps> = ({ style, ...props }) => {
    return (
      <View>
        <Button
          style={[
            { marginVertical: 5 }, // 组件基础样式
            style // 外部传入的样式，不管是普通对象还是StyleSheet生成的ID都能正确识别
          ]}
          {...props}
        >Test</Button>
      </View>
    );
};

如果需要手动读取样式属性（比如做逻辑判断），可以用StyleSheet.flatten把样式ID转成普通对象：

import { StyleSheet } from 'react-native';

export const CustomButton: React.FC<ButtonProps> = ({ style, ...props }) => {
    const flattenedStyle = StyleSheet.flatten(style);
    console.log(flattenedStyle); // 这里就能拿到{width:100}这样的真实样式对象
    return (
      <View>
        <Button
          style={{
            marginVertical: 5,
            ...flattenedStyle
          }}
          {...props}
        >Test</Button>
      </View>
    );
};

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