React Native 0.60+给View传opacity属性报TypeScript属性不存在错误怎么解决

React Native 原生 View 组件未提供顶层 opacity 属性，opacity 属于样式属性，只能在 style 配置项中声明，你直接将 opacity 作为 View 的顶层属性传入，不符合 ViewProps 的TS类型定义，因此触发类型报错。

方案1：直接将opacity写入style属性（推荐） #

将原本的顶层opacity属性移到style内部即可，修改后的代码如下：

<View style={{ opacity: true ? 0.5 : 1 }}> </View>

方案2：自定义封装支持顶层opacity的View组件 #

如果业务场景需要频繁使用顶层opacity属性，可以自行扩展ViewProps类型封装自定义组件：

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

// 扩展原生ViewProps添加opacity属性
type TOpacityViewProps = ViewProps & {
  opacity?: number;
};

const OpacityView: React.FC<TOpacityViewProps> = ({ opacity, style, ...restProps }) => {
  // 合并opacity到style中
  const mergedStyle: StyleProp<ViewStyle> = [{ opacity }, style];
  return <View style={mergedStyle} {...restProps} />;
};

export default OpacityView;

封装完成后即可直接按你的原有写法使用：

<OpacityView opacity={true ? 0.5 : 1}> </OpacityView>

不推荐方案：临时跳过类型校验 #

如果只是临时调试，可以在报错代码行上方添加注释跳过TS校验，该方案会丢失类型检查能力，不建议在生产代码中使用：

// @ts-ignore
<View opacity={true ? 0.5 : 1}> </View>

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