React Native 中没有重载与此调用错误匹配

Question

问题

以下代码会引发错误。该代码是重现原始错误的最小可执行代码。

import React from 'react';
import { Button, StyleSheet } from 'react-native';

const MyButton = () => {
  return (
    <Button
      title="Click me"
      style={styles.button}
    />
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#0f0',
    color: '#fff',
    padding: 10,
  },
});

错误：

No overload matches this call.
  Overload 1 of 2, '(props: ButtonProps): Button', gave the following error.
    Type '{ title: string; style: { backgroundColor: string; color: string; padding: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
      Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
  Overload 2 of 2, '(props: ButtonProps, context: any): Button', gave the following error.
    Type '{ title: string; style: { backgroundColor: string; color: string; padding: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.
      Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<ButtonProps>'.ts(2769)

结果，React Native 网页是空的。

环境

• Windows 11
• npm 10.8.2

到目前为止我做了什么

我检查了以下几页，但没有成功。

• reactjs - React + TypeScript 错误：没有重载与此调用匹配 - 堆栈内存溢出
typescript - 为什么在传递反应式 prop 时出现“没有与此调用匹配的重载”错误？ - 堆栈溢出
reactjs - 如何解决没有重载匹配此调用错误打字稿 - Thinbug
• 我应该怎么做才能解决这个问题？

属性“样式”不存在...

Answer 1

错误准确地告诉您问题是什么。

React Native 中的 Button 组件没有 style 属性。

“没有与此调用匹配的重载”意味着根据组件的类型，您正在传递一个不存在的属性或属性组合。