쿠션감 있는 버튼 만들기

목차

쿠션감 있는 버튼 만들기

나는 버튼을 누를때 쿠션감을 좋아한다.

근데 RN(React Native)에서는 가상선택자가 없어서

hover active등 간단한 설정은 따로 없었다.

 

구글링해보니 패키지를 다운받는게 일반적인것같다.

react-native-touchable-scale

하지만 패키지를 쓰면 아무래도 용량 가성비가 떨어지니깐,

개별설정하는법을 어떻게 만들어봤다.

코드

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import {Text, View, TouchableWithoutFeedback } from 'react-native';
import styled from 'styled-components';


export default function App() {
  const [btnSize, setBtnSize] = useState(1);

  function OnPressIn(){
    setBtnSize(0.98);
  }

  function OnPressOut(){
    setBtnSize(1);
  }

  return (
    <View>
      <StatusBar/>
      <View style={{height:"100%",justifyContent:"center", alignItems:"center"}}>
        <TouchableWithoutFeedback onPressIn= {OnPressIn} onPressOut= {OnPressOut}>
          <ButtonView size= {btnSize}>
            <Text>버튼</Text>
          </ButtonView>
        </TouchableWithoutFeedback>
      </View>
    </View>
  );
}

const ButtonView = styled.View`
  width: 90%;
  height:40px;
  border-radius:10px;
  background: #aa96da;
  justify-content: center;
  align-items: center;
  transform: scale(${(props) => props.size || 1});
`;

 개념

이번 포스트에서 중요한점은
button 태그와 touchable 태그의 차이점을 아는것이다.

touchable

touchable태그는 이름과 같이 터치 가능한, 터치에 반응하는 태그이다
특징으로

터치를 했을때 실행되는 함수 onPress 외에도
터치를 시작할때 함수 onPressIn
터치를 끝냈을때 함수 onPressOut
로 세분화된 함수가 존재한다.

또한 눌렀을때 기본적인 시각변화 효과를 지닌 태그도 따로 만들어져있다.

태그에 대한 자세한 설명은 따로 포스팅을 하는게 좋겠다.

button

button태그는 눌렀을때 발동하는 함수

onPress가 메인함수이며,

touchable에 비해 커스터마이징 옵션은 적지만

button태그 하나로 버튼을 구현할수있어

단순한 빌드업이 가능하다.

 

해석

export default function App() {
  const [btnSize, setBtnSize] = useState(1);

  function OnPressIn(){
    setBtnSize(0.98);
  }

  function OnPressOut(){
    setBtnSize(1);
  }

  return (
    <TouchableWithoutFeedback onPressIn= {OnPressIn} onPressOut= {OnPressOut}>
      <ButtonView size= {btnSize}></ButtonView>
    </TouchableWithoutFeedback>
  );
}

const ButtonView = styled.View`
  transform: scale(${(props) => props.size || 1});
`;

일단 기본적으로 알아야 할 문법은

styled components 심화편

이다.

읽고와야 이해된다.

 

<TouchableWithoutFeedback
  onPressIn= {OnPressIn}
  onPressOut= {OnPressOut}/>

touchable태그를 생성했고,

터치를 시작했을때 함수 onPressIn에 OnPressIn을 대입,

터치를 끝냈을때 함수 onPressOut에 OnPressOut을 대입한다.

const [btnSize, setBtnSize] = useState(1);

function OnPressIn(){
  setBtnSize(0.98);
}

function OnPressOut(){
  setBtnSize(1);
}

OnPressIn / OnPressOut 함수에서는

hook으로 btnSize를 변경하는데,

이는 scale의 수치이다.

 

변경된 btnSize는 prop(인자)로 view의 styled-components로 전해지고

<ButtonView size= {btnSize}></ButtonView>

const ButtonView = styled.View`
  transform: scale(${(props) => props.size || 1});
`;

전해진 값은 scale 값이되어 버튼의 크기를 변경한다.

결과

끝