带有 Typescript 的 React-Native 自定义文本组件：“将 React.ReactNode 类型转换为文本类型......”

Posted 2023-02-23

【中文标题】带有 Typescript 的 React-Native 自定义文本组件：“将 React.ReactNode 类型转换为文本类型......”

【英文标题】：React-Native custom Text component with Typescript : "Conversion of type React.ReactNode to type Text..."

【发布时间】：2020-12-24 01:16:48

【问题描述】：

我一直在尝试在 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;

但是，我在 上有一个错误：“类型 缺少来自类型 'Text' 的以下属性：measure、measureInWindow、measureLayout、setNativeProps 和另外 9 个”

如果我删除 组件的样式道具，我在 VSCode 中遇到另一个错误：“类型 children: React.ReactNode 到类型 Text 的转换可能是一个错误，因为这两种类型都没有与另一种充分重叠。如果是故意的，请先将表达式转换为未知"

好像我会为孩子道具设置错误的类型？

提前致谢！

【参考方案1】：

将 TextProps 中的子类型更改为：

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