React-native & typescript：<ImageBackground> 组件，属性“children”在类型“IntrinsAttributes &...”上不存在答案

【问题标题】：React-native & typescript: <ImageBackground> component, property 'children' does not exist on type 'IntrinsAttributes &...'React-native & typescript：<ImageBackground> 组件，属性“children”在类型“IntrinsAttributes &...”上不存在
【发布时间】：2022-07-08 04:33:34
【问题描述】：

当我使用来自“react-native”的<ImageBackground> 和<Image> 组件时，我很难理解为什么打字稿会给我这个错误消息。

错误信息：

没有重载匹配这个调用。重载 1 of 2，'(props: ImageBackgroundProps | Readonly): ImageBackground'，给出了以下错误。类型'{孩子：元素；风格：{弹性：数字； justifyContent: "flex-end"; }; resizeMode: "封面";来源：任何； }' 不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上不存在属性“children”。 Overload 2 of 2, '(props: ImageBackgroundProps, context: any): ImageBackground'，给出了以下错误。类型'{孩子：元素；风格：{弹性：数字； justifyContent: "flex-end"; }; resizeMode: "封面";来源：任何； }' 不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上不存在属性“children”。

主要源代码：

import React from "react";
import {
  ImageBackground,
  StyleSheet,
  View,
} from "react-native";

export default function WelcomeScreen() {
  return (
    <ImageBackground
      style={styles.background}
      resizeMode="cover"
      source={require("../assets/images/background.jpg")}
    >
      <View>
        <View style={styles.logginButton}></View>
        <View style={styles.registerButton}></View>
      </View>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    justifyContent: "flex-end",
  },
  logginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
  registerButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#4ecdc4",
  },
});

因为错误消息听起来像是我无法在 ImageBackground 组件中传递子元素，所以当我将 ImageBackground 组件更改为自关闭元素时（如 <ImageBackground source={image source} /> 错误消息消失了。

我目前使用的另一个解决方案是定义一个引用 expo typescript 模板的自定义组件。在 Themed.tsx 中，模板定义了自定义 <Text> 和 <View> 组件以应用自定义主题。

代码当前有效：

import React from "react";
import {
  ImageBackground as DefaultImageBackground,
  StyleSheet,
  View,
} from "react-native";

type ImageBackgroundProps = DefaultImageBackground["props"] & {
  children: React.ReactNode;
};

function MyBackground(props: ImageBackgroundProps) {
  return <DefaultImageBackground {...props} />;
}

export default function WelcomeScreen() {
  return (
    <MyBackground
      style={styles.background}
      resizeMode="cover"
      source={require("../assets/images/background.jpg")}
    >
      <View>
        <View style={styles.logginButton}></View>
        <View style={styles.registerButton}></View>
      </View>
    </MyBackground>
  );
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    justifyContent: "flex-end",
  },
  logginButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#fc5c65",
  },
  registerButton: {
    width: "100%",
    height: 70,
    backgroundColor: "#4ecdc4",
  },
});

但我觉得我的解决方案没有意义，ImageBackground 组件应该可以带子元素。我的主要源代码中是否有任何语法错误？

【问题讨论】：

“听起来我无法在 ImageBackground 组件中传递子元素”是的，这正是错误消息告诉您的内容。 “mageBackground 组件应该能够带孩子”是的，它应该。你用的是什么版本的 react native？

标签： typescript react-native

【解决方案1】：

我对 ImageBackgroun 有同样的问题。问题在于 TypeScript 没有检测到 ImageBackground 接口中的子道具，即使它是从另一个接口扩展的。我通过添加来修复它

    children:React.ReactNode;

在 \node_modules@types\react-native\index.d.ts 的第 3909 行

export interface ImageBackgroundProps extends ImagePropsBase {
imageStyle?: StyleProp<ImageStyle> | undefined;
style?: StyleProp<ViewStyle> | undefined;
imageRef?(image: Image): void;
children:React.ReactNode; //add this line
}

现在一切正常，我希望这能解决您的问题。

【讨论】：

【解决方案2】：

我也有这个问题。我通过更改我正在使用的节点版本来修复它。此问题存在于节点 16.14.0 到 16.15.0。我注意到：

node 16.14.2 引入 npm 8.5.0
node 16.15.0 引入 npm 8.5.5
node 16.3.2 引入 npm 8.1.2
node 17.0.0 引入 npm 8.1.0

我们只是将项目保留在16.13.2，而不是更新。

我目前的理论是，npm 中的这些差异导致 tsc 解释规则的方式不同。我很想知道我是否错了。

查看ImageBackground的源代码我看到了

class ImageBackground extends React.Component<$FlowFixMeProps> {
  setNativeProps(props: Object) {
    // Work-around flow
    const viewRef = this._viewRef;
    if (viewRef) {
      viewRef.setNativeProps(props);
    }
  }

其中设置为：

type $FlowFixMeProps = /*unresolved*/ any

有没有可能 tsc 不喜欢任何东西？

【讨论】：

【解决方案3】：

您使用的是什么版本的 react-native，如果您使用的是 0.67.x，请将 @types/react-native 更新为 0.67.6，因为该错误已修复。

如果您需要遵循@brahim-mahioussi 的回答，您可以使用PATCH PACKAGE，这样您就不会丢失对 node_modules 路径的更改，但请务必将该属性添加为可选：

children?: React.ReactNode; //add this line

【讨论】：

【解决方案4】：

使用封闭标签。因为 ImageBackground 类型内部没有子元素：

<ImageBackground source={require("./src/exemple.png")} resizeMode="cover" />

但是你需要使用这种风格：

position: 'absolute',
width: "100%",
height: "100%",

【讨论】：

【解决方案5】：

我在 Expo 管理的项目中遇到了同样的问题。升级以下解决了这个问题。

    "@types/react": "^18.0.15",
    "@types/react-native": "^0.69.2",
    "typescript": "^4.7.4"

【讨论】：