React-native & typescript: คอมโพเนนต์ , คุณสมบัติ 'children' ไม่มีอยู่ในประเภท 'IntrinsAttributes &...'

ฉันกำลังพยายามเข้าใจว่าทำไม TypeScript ถึงให้ข้อความแสดงข้อผิดพลาดนี้เมื่อฉันใช้คอมโพเนนต์ <ImageBackground> และ <Image> จาก 'react-native'

ข้อความแสดงข้อผิดพลาด:

ไม่มีการโอเวอร์โหลดที่ตรงกับการเรียกนี้ โอเวอร์โหลด 1 จาก 2, '(props: ImageBackgroundProps | Readonly): ImageBackground', ทำให้เกิดข้อผิดพลาดดังนี้ ประเภท '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' ไม่สามารถกำหนดค่าให้กับประเภท 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' ได้ คุณสมบัติ 'children' ไม่มีอยู่ในประเภท 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. การโอเวอร์โหลด 2 จาก 2, '(props: ImageBackgroundProps, context: any): ImageBackground', ได้ให้ข้อผิดพลาดดังต่อไปนี้ ประเภท '{ children: Element; style: { flex: number; justifyContent: "flex-end"; }; resizeMode: "cover"; source: any; }' ไม่สามารถกำหนดค่าให้กับประเภท 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' ได้ คุณสมบัติ 'children' ไม่มีอยู่ในประเภท '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 ควรจะสามารถมีลูกองค์ประกอบได้ มีข้อผิดพลาดด้านไวยากรณ์ในซอร์สโค้ดหลักของฉันหรือไม่?

คำตอบ #1

คุณกำลังใช้ react-native เวอร์ชันใด หากคุณกำลังใช้ 0.67.x โปรดอัปเดต @types/react-native เป็น 0.67.6 เนื่องจากข้อผิดพลาดนั้นได้รับการแก้ไขแล้ว

ในกรณีที่คุณจำเป็นต้องปฏิบัติตามคำตอบของ @brahim-mahioussi คุณสามารถใช้ PATCH PACKAGE เพื่อไม่ให้การเปลี่ยนแปลงของคุณในเส้นทาง node_modules หายไป แต่ต้องแน่ใจว่าได้เพิ่มคุณสมบัติเป็นแบบเลือกได้:

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

คำตอบ #2

ฉันเจอปัญหาเดียวกันกับ ImageBackground ปัญหาอยู่ที่ TypeScript ไม่สามารถตรวจจับ props ของ children ในอินเทอร์เฟซ 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
}

ตอนนี้ทุกอย่างทำงานได้ดีแล้ว ฉันหวังว่านี่จะช่วยแก้ปัญหาของคุณได้