Блог

Я получаю эту ошибку при использовании styled-components в проекте react native.

 TypeError: undefined is not a function (near '..._styledComponents.default.button...')
 

Вот мой код;

 import styled from "styled-components";
const Buttonn = styled.button`
  background: white;
  width: 200px;
  height: 50px;
  bordercolor: black;
  font-size: 24px;
  color: black;
  text-align: center;
  amp;:hover {
    background: black;
    color: white;
  }
`;

function CourierDetails() {
  return (
  <Buttonn>Submit</Buttonn>
)}
 

стиль.кнопка работает в React (web), если вы хотите оформить кнопку в React-native, вам необходимо использовать компонент кнопки, предоставляемый react-native.

Также вам необходимо импортировать стилизованный компонент из «стилизованные компоненты/родной»

 import styled from 'styled-components/native'
 

Вы можете создать компонент CustomButton, как показано ниже

 import React from 'react';
import styled from 'styled-components/native';

const CustomButton = props => (
    <ButtonContainer
        onPress={() => alert('Hi!')}
        backgroundColor={props.backgroundColor}
    >
        <ButtonText textColor={props.textColor}>{props.text}</ButtonText>
</ButtonContainer>
);

export default CustomButton;

const ButtonContainer = styled.TouchableOpacity`
    width: 100px;
    height: 40px
    padding: 12px;
    border-radius: 10px;    
    background-color: ${props => props.backgroundColor}; 
`;

const ButtonText = styled.Text`
    font-size: 15px;
    color: ${props => props.textColor};
    text-align: center;
`;
 

Надеюсь, этот ответ поможет вам, спасибо!