没有重载匹配此调用 Typescript on Button in React native答案

【问题标题】：No overload matches this call Typescript on Button in React native没有重载匹配此调用 Typescript on Button in React native
【发布时间】：2021-09-22 14:36:59
【问题描述】：

我有我的Welcome.tsx 文件：

import React from 'react';
import {View, StyleSheet, Text, Button, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

const WelcomeScreen: React.FC<{}> = () => {
  return (
    <View style={styles.container}>
      <View style={styles.logo}>
        <Icon size={150} color="black" name="book-open" />
        <Text style={styles.logoText}>Book Worm</Text>
      </View>
      <View style={styles.divider}>
        <TouchableOpacity>
          <Button title="Login" color="black" style={styles.btn} />
        </TouchableOpacity>
        <TouchableOpacity>
          <Button title="Sign-up" color="black" style={styles.btn} />
        </TouchableOpacity>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  logo: {
    flex: 1,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logoText: {
    fontSize: 50,
    fontWeight: '100',
  },
  divider: {
    flex: 1,
    borderWidth: 1,
  },
  btn: {
    borderWidth: 1,
    borderColor: 'black',
    backgroundColor: 'black',
  },
});
export default WelcomeScreen;

如您所见，这很正常。但是，Visual Studio 代码突出显示 style 属性并引发以下错误：

No overload matches this call.
  Overload 1 of 2, '(props: ButtonProps | Readonly<ButtonProps>): Button', gave the following error.
    Type '{ title: string; color: string; style: { borderWidth: number; borderColor: string; backgroundColor: string; }; }' is not assignable to type 'IntrinsicAttributes &

图片如下：

知道是什么导致了这个重载匹配调用吗？想知道这件事发生了几次。

【问题讨论】：

标签： javascript typescript react-native

【解决方案1】：

React Native 按钮提供的选项非常有限。 React Native Button 在其文档中没有 style 属性。请参阅here，这就是您收到此错误的原因

如果您想要自定义样式的按钮，请使用TouchableOpacity

看到你的代码你可以试试这个

<TouchableOpacity style={styles.btn}>
   <Text style={{ color: 'black' }}>Login</Text>
</TouchableOpacity>t

【讨论】：