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

Question

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

错误信息：

没有重载与此调用匹配。重载第 1 个（共 2 个）“(props: ImageBackgroundProps | Readonly): ImageBackground”出现以下错误。类型 '{ 子元素：元素；样式：{ 弹性：数字；justifyContent：“flex-end”；}; resizeMode：“覆盖”；来源：任何；}' 不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”。类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上不存在属性“children”。重载 2 个，共 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 组件应该能够采用子元素。我的主要源代码中是否存在语法错误？

Answer 1

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

• Node16.14.2引入npm8.5.0
• Node16.15.0引入npm8.5.5
• Node16.3.2引入npm8.1.2
• Node17.0.0引入npm8.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不喜欢任何一个？