React-native 和 typescript：<ImageBackground> 组件，属性 'children' 在类型 'IntrinsAttributes &...' 上不存在

Question

我很难理解为什么当我使用来自 'react-native'.

的 <ImageBackground> 和 <Image> 组件时打字稿给我这个错误信息

错误信息：

No overload matches this call. Overload 1 of 2, '(props: ImageBackgroundProps | Readonly): ImageBackground', gave the following error. Type '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: ImageBackgroundProps, context: any): ImageBackground', gave the following error. Type '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

主要源代码：

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组件应该可以带children元素。我的主要源代码中是否存在任何语法错误？

Answer 1

我也遇到了这个问题。我通过更改我使用的节点版本来修复它。此问题存在于节点 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);
    }
  }

其中 <$FlowFixMeProps> 设置为：

type $FlowFixMeProps = /*unresolved*/ any

有没有可能是 tsc 不喜欢？

Answer 2

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

来修复它

    children:React.ReactNode;

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

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

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

Answer 3

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

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

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

Answer 4

使用封闭标签。因为在 ImageBackground 类型里面没有 children:

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

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

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

React-native 和 typescript：<ImageBackground> 组件，属性 'children' 在类型 'IntrinsAttributes &...' 上不存在

React-native & typescript: <ImageBackground> component, property 'children' does not exist on type 'IntrinsAttributes &...'

typescript

react-native