React Native传inline style prop时报style不存在于IntrinsicAttributes类型错误

核心原因 #

IntrinsicAttributes 是React/TS专门给原生内置元素（比如RN自带的<View>、<Text>等核心组件）预设的属性集合，style确实是这类原生组件的内置属性，所以你给原生组件传style不需要额外声明。
但你自己写的自定义组件不属于原生内置元素范畴，TS不会默认给任何自定义组件添加预设属性，所有你需要接收的入参都必须显式声明类型，style也不例外，这是TS类型检查的正常机制，目的是避免传入未被组件处理的无效属性。 #

两种常见的声明方式 #

1. 单独声明style属性 #

你可以直接在自定义组件的props类型定义中新增style字段，根据你组件根容器的类型选择对应的样式类型即可：

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

type MyComponentProps = {
  // 其他自定义属性
  title: string;
  // 声明style属性，可选，类型适配根容器的样式规则
  style?: StyleProp<ViewStyle>;
}

export const MyComponent = ({ style, title, ...rest }: MyComponentProps) => {
  // 记得把style传给你组件的根容器才会生效
  return <View style={style}>{title}</View>
};

2. 继承原生组件的全部属性 #

如果你的自定义组件本质是对某个原生组件的封装，也可以直接继承对应原生组件的Props类型，这样不用单独声明就能直接用style、testID等所有原生组件自带的属性：

import type { ViewProps } from 'react-native';

// 直接继承View的所有属性，自带style声明
type MyComponentProps = ViewProps & {
  // 只需要加你自己的自定义属性即可
  title: string;
}

export const MyComponent = ({ style, title, ...rest }: MyComponentProps) => {
  // 把所有继承的属性透传给根View
  return <View style={style} {...rest}>{title}</View>
};

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