Typescript を使用した React-Native カスタム Text コンポーネント: 「React.ReactNode 型から Text 型への変換...」

私は React Native で次のカスタム Text コンポーネントを実装しようとしています。

import React from 'react';
import { Text as RNText, TextStyle } from 'react-native';

export interface TextProps {
  children: React.ReactNode; 
  type?: 'title' | 'large' | 'medium' | 'small';
  weight?: 'thin' | 'light' | 'regular' | 'bold';
  color?: string;
  style?: TextStyle;
};

const Text = ({
  children,
  type,
  weight,
  color,
  style = {}
}: TextProps) => {
  const fontSize = () => {
    switch (type) {
      case 'title':
        return 24;
      case 'large':
        return 28;
      case 'medium':
        return 18;
      case 'small':
        return 14;

      default:
        return 16;
    }
  };

  const fontFamily = () => {
    switch (weight) {
      case 'thin':
        return 'Lato-Thin';
      case 'light':
        return 'Lato-Light';
      case 'regular':
        return 'Lato-Regular';
      case 'bold':
        return 'Lato-Bold';

      default:
        return 'Lato-Regular';
    }
  };

  return (
    <RNText 
      style={{
        fontFamily, 
        fontWeight, 
        color: color || '#fff', 
        {...style}
      }}
    >
      {children}
    </RNText>
  );
};

export default Text;

しかし、<RNText> でエラーが発生しました。 : "タイプ {} にはタイプ 'Text' の次のプロパティがありません:measure、measureInWindow、measureLayout、setNativeProps およびその他 9 個''

<RNText> のスタイル小道具を削除すると、コンポーネントで、VSCode で別のエラーが発生しました。「{children: React.ReactNode} 型から Text 型への変換は、どちらの型も他の型と十分に重複していないため、間違いである可能性があります。」意図的な場合は、最初に式を不明に変換します。

子プロップに間違ったタイプを設定してしまうようです?

よろしくお願いします！

TextProps の子のタイプを次のように変更します。

children: (string | Element)[] | string | string[]

TextProps タイプを使用できます。

 import { Text as RNText, TextStyle,TextProps } from 'react-native';

インターフェイスを使用しているので、TextProps とマージします

export interface TextProps extends TextProps {
  children: React.ReactNode; 
  type?: 'title' | 'large' | 'medium' | 'small';
  weight?: 'thin' | 'light' | 'regular' | 'bold';
  color?: string;
  style?: TextStyle;
};

戻り値の型も ReactElement である必要があります

const Text = ({
  children,
  type,
  weight,
  color,
  style = {}
}: TextProps):ReactElement => {