将 Expo 从 v48 升级到 v49 后，React 18 和 TypeScript 出现样式组件错误

Question

我最近将我的

Expo

应用程序从版本 48 升级到 49，并随后将 React 从版本 16 更新到 18。升级后，在使用带有子组件的组件时，我遇到了与样式组件相关的

TypeScript

错误。我在 SO 中检查了很多与此相关的问题，但没有任何效果对我有用。我不知道我做错了什么。

    // 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>
      );
    };

即使我把

H1

作为孩子，它仍然会抛出这个错误

我遇到的错误是

类型“Element”不可分配给类型“ReactNode”。 “Element”类型中缺少属性“children”，但“ReactPortal”类型中需要属性“children”。

依赖关系：

    "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"

Answer 1

没有传递子节点时会出现错误，所以更改以下内容

    <Row>
      <View />
    </Row>

到此

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

Text

字段不一定需要，它只是派上用场看看它是否有效！