reactjs - Expo'yu v48'den v49'a yükselttikten sonra styled-components ile React 18 ve TypeScript Hatası


Yakın zamanda Expo uygulamamı 48. sürümden 49. sürüme yükselttim ve bunu takiben React'i 16. sürümden 18. sürüme güncelledim. Yükseltmeden sonra, çocuk özelliklerine sahip bileşenleri kullanırken styled components ile ilgili bir TypeScript hatası ile karşılaşıyorum. Bu konuyla ilgili SO'da birçok sorunu inceledim ama hiçbiri benim için işe yaramadı. Ne yanlış yaptığımı anlayamadım.

    // Row.tsx
    import React from 'react';
    import { View, ViewProps } from 'react-native';
    import styled from 'styled-components/native';
    
    interface Props extends ViewProps {
      children: React.ReactNode;
    }
    
    const StyledView = styled(View)<Props>`
      flex-direction: row;
    `;
    
    export const Row = ({ children, ...props }: Props) => {
      return <StyledView {...props}>{children}</StyledView>;
    };
    
    // MyComponent.tsx
    import React from 'react';
    import { View } from 'react-native';
    import { Row } from '../components/custom-components';
    
    const MyComponent = () => {
      return (
        <Row>
          <View /> <--- error appear here
        </Row>
      );
    };

çocuk olarak H1 koysam bile bu hatayı veriyor

Aldığım hata şudur

Tür 'Element', türe 'ReactNode' atanamaz. Tür 'Element'te 'children' özelliği eksik, ancak tür 'ReactPortal'de zorunludur.

Bağımlılıklar :

    "react-native": "0.72.6"
    "react": "18.2.0"
    "react-dom": "18.2.0",
    "typescript": "^5.1.3"
    "styled-components": "^5.3.5",
    "styled-system": "^5.1.5",
    "@types/styled-components": "5.1.26",
    "@types/styled-components-react-native": "^5.1.3",
    "@types/styled-system": "^5.1.16",
    "@types/react-dom": "~18.0.10",
    "@types/react": "18.2.38"

Cevap #1

Hata, hiç çocuk gönderilmediğinde oluşur, bu yüzden aşağıdakini değiştirin

    <Row>
      <View />
    </Row>

buna

    <Row>
      <View>
          <Text>Check if it works</Text
      </View>
    </Row>

Text alanı mutlaka gerekli değildir, sadece çalışıp çalışmadığını görmek için kullanışlıdır!