在 TypeScript 中扩展 react-native-paper Button 和 Text 组件

Question

我正在尝试使用 react-native-paper 制作一个可重用的组件

当我尝试使用包中的扩展类型时出现问题

import React from 'react';

import {Button, Text} from 'react-native-paper';

export type ButtonProps = React.ComponentProps<typeof Button>;

type CustomButtonProps = ButtonProps & {
title: string;
};

export const ButtonPaper: React.FC<CustomButtonProps> = ({title, ...props}) => {
return (
<Button mode="contained" {...props}>
  welcome
</Button>
);
};

到目前为止一切都很好，但是当我尝试在屏幕上使用该组件时，打字稿给了我那个错误

有什么解决办法吗？

Answer 1

您可以如下所示扩展它

创建文件ButtonPaper.tsx

// Packages Imports
import * as React from "react";
import { Button } from "react-native-paper";

// Type for CustomButton
export type CustomButtonProps = {
  title: string;
} & React.ComponentProps<typeof Button>;

// function component for CustomButton
const ButtonPaper: React.FC<CustomButtonProps> = ({ title, ...props }) => {
  return (
    <Button mode="contained" {...props}>
      {title}
    </Button>
  );
};

// Exports
export default ButtonPaper;

此外，react-native-paper 的 Button 组件中的 children 道具是强制性的。所以，为了避免打字稿警告，你可以做

export type CustomButtonProps = {
  title: string;
} & Omit<React.ComponentProps<typeof Button>, "children">;

Working Example

在 TypeScript 中扩展 react-native-paper Button 和 Text 组件

Extending react-native-paper Button and Text components in TypeScript

typescript

react-native

react-native-paper