我試圖使用 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>
);
};
到目前為止一切都很好，但是當我嘗試在螢屏上使用該組件時，打字稿給了我這個錯誤
有什么解決方案嗎？
uj5u.com熱心網友回復：
您可以如下所示擴展它
創建檔案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;
此外，組件中的children道具是強制性的。所以，為了避免打字稿警告，你可以做Buttonreact-native-paper
export type CustomButtonProps = {
title: string;
} & Omit<React.ComponentProps<typeof Button>, "children">;
作業示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/434407.html