Styled Components와 React Native의 변종 Criando

Nesse artigo, quero mostrar um dos poderes de se utilizar styled components em suas aplicações irei mostrar como criar variações de estilos aos seus botões usando React Native e styled components.

Primeiro criaremos nosso componente Button, com os arquivos index.tsx e styles.ts



Em nosso 스타일, "ButtonVariant"에서 "ButtonVariant"에 대한 정보를 입력하고 변형에 대한 추가 정보를 내보내십시오. 수출 pois aproveitaremos essa tipagem para usar mais a frente em nosso index.tsx, após isso criaremos mais duas tipagem uma chamada de ButtonContainerProps e outra ColorTextProps는 다른 방식으로 소품 변형을 통과할 때 반응하지 않습니다.

export type ButtonVariant = 'primary' | 'secondary' | 'outline';

type ButtonContainerProps = {
  variant: ButtonVariant
}

type ColorTextProps = {
  variant: ButtonVariant
}

Logo após isso criaremos dois objetos o "backgroundVariant"e a "textVariant"esses dois objetos irão receber as cores de cada variação sendo que o "backgroundVariant"mudará a cor de fundo e o "textVariant"mudará a cor do texto do nosso botão.

const backgroundVariant = {
  primary: '#16003B',
  secondary: '#006E7F',
  outline: 'tranparent',
}
const textVariant = {
  primary: '#fcda3c',
  secondary: '#fff',
  outline: '#000',
}

Vamos no nosso index.tsx, adicionaremos uma nova tipagem chamada de ButtonProps ela vai receber uma "variant"do tipo ButtonVariant que é aquela mesma que criamos em nosso style, por isso colocamos aquele export nela para ser possível fazermos o import da mesma aqui no index.tsx. Button 개발 도구는 ButtonProps에서 변종 매개 변수를 선택하여 기본적으로 "primary"또는 "변형"또는 "primary"의 코어로 시작하는 버튼에 대한 변종을 찾을 수 있습니다.

태그로서 ButtonContainer와 Title은 아무 스타일도 없으며, 중요한 것은 태그를 통과하거나 성공을 위한 변형에 대한 변형입니다.

import { ButtonContainer, ButtonVariant, Title } from './styles';

type ButtonProps = {
  variant: ButtonVariant;
};

export function Button({ variant = 'primary' }: ButtonProps) {
  return (
    <ButtonContainer variant={variant}>
      <Title variant={variant}>Enviar</Title>
    </ButtonContainer>
  );
}

Styles.ts에서 모든 옵션을 사용할 수 있으며, iremos estilar nosso botão e capturar os valores das nossas variantes.

스타일이 지정된 구성 요소는 다음과 같이 구성 요소를 구성할 수 있으며, TouchableOpacity는 기본적으로 반응하고 ButtonConatainerProps는 ButtonConatainerProps를 사용할 수 없습니다. Para saber qual variante foi passada para o botão é que veem uma das vantagens de usar o styled components, utilizando “${}” podemos escrever javascript e assim acessar nossas props, nesse exemplo para definir o background-color 활용 o o objeto de backgroundVariant que criamos anteriormente para pegar o valor 16진법 da cor. Somado isso, com a utilização de javascript podemos fazer condições que estamos acostumados e assim definir novas propriedades para cada variação, no example usei o operator ternário para definir a cor do border do botão para cada variante.

export const ButtonContainer = styled.TouchableOpacity<ButtonContainerProps>`
 width: 80%;
 border-radius:5px;
 padding: 18px;
 margin-top: 50px;

 ${props => {
 return css`
    background-color:${backgroundVariant[props.variant]};

    border: solid 1px ${props.variant === 'primary' ?
    backgroundVariant[props.variant] : props.variant === 'secondary' ?
          '#006E7F' : '#000'};
`
  }}
`;

Para definir a cor do texto segue os mesmos princípios e funcionamentos citados anteriormente, a diferença é que aqui usaremos a tipagem de ColorTextProps e o objeto que passamos é o textVariant.

export const Title = styled.Text<ColorTextProps>`
  text-align: center;
  font-size: 14px;
  font-weight: 700;

  ${props => {
    return css`color:${textVariant[props.variant]};`
  }}

`;

Por fim podemos usar nossos Buttons passando qual variação queremos, aqui está o resultado final:

결론

우리는 React Native와 함께 Styled Components를 유용하게 사용할 수 있으며 인터페이스를 확장하고 재사용할 수 있는 별칭으로 사용할 수 있습니다. Espero que tenham gostado valeu e fui.