Реагировать на проблему с родными стилевыми компонентами: typerror: _native.default.button не является функцией

Question

Я получаю сообщение об ошибке выше в моем телефоне после того, как я пытаюсь отобразить кнопку в моем представлении, используя метод styled.button.

Вот фрагмент кода, использующий метод styled.button.

import styled from 'styled-components/native';
import React from 'react';
import { View } from 'react-native';

const ButtonView = styled.button`
backgroundColor:red;
color:white;
border: 2px solid white;
borderRadius: 3px;
width:100%;
`;

const login = () => {
  return (
    <View style={{backgroundColor:"#2667C9",alignItems:"center"}}>
      <ButtonView>Go</ButtonView>
    </View>
  );
};

export default login;

Ниже приведена ошибка, возникающая при запуске кода. Я понятия не имею, почему это происходит, поскольку официальная страница документации предлагает именно этот метод.

Answer 1

React native не понимает компонент button. Вам нужно импортировать Button из React native и стилизовать ее

import { View , Button} from 'react-native';

const ButtonView = styled(Button)`
backgroundColor:red;
color:white;
border: 2px solid white;
borderRadius: 3px;
width:100%;
`;

или использовать символ верхнего регистра, например styled.Button

const ButtonView = styled.Button`
    backgroundColor:red;
    color:white;
    border: 2px solid white;
    borderRadius: 3px;
    width:100%;
    `;