Блог

У меня есть мое 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 amp; 
 

Вот изображение:

Есть идеи, что вызывает эту перегрузку при вызове? пару раз я задавался вопросом, как это случилось.

Собственные кнопки React очень ограничены в возможностях, которые они предоставляют. React Native Button не имеет style свойств в своих документах. Смотрите здесь, вот почему вы получаете эту ошибку

Если вы хотите создать кнопку с пользовательскими стилями, используйте TouchableOpacity

Увидев ваш код, вы можете попробовать это

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