[React Native] 타일형 버튼 세트 구현하기

 

버튼을 탭하면 선택된 버튼만 다른 모양이 되는 버튼 세트에요.

import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';
import styled, {css} from 'styled-components/native';

const ContainerBox = styled.View`
  width: 100%;
`;

const TitleText = styled.Text`
  text-align: center;
  font-size: 35;
`;

const TopBox = styled.View`
  flex-direction: row;
  width: 100%;
  align-items: center;
  background-color: white;
  justify-content: space-around;
  flex-wrap: wrap;
`;

const MyButton = styled.Pressable`
  width: 48%;
  align-items: center;
  background-color: oldlace;
  border-radius: 10;
  elevation: 2;
  padding-vertical: 10;
  margin-vertical: 4;

  ${props =>
    props.selected &&
    css`
      background-color: coral;
    `}
`;

const MyButtonText = styled.Text`
  color: coral;

  ${props =>
    props.selected &&
    css`
      color: white;
    `}
`;

function ButtonSet(props) {
  return (
    <MyButton
      selected={props.selected === props.title}
      onPress={() => props.onPress(props.title)}>
      <MyButtonText selected={props.selected === props.title}>
        {props.title}
      </MyButtonText>
    </MyButton>
  );
}

const App: () => Node = () => {
  const [selectedTitle, setSelectedTitle] = useState('Button1');

  const onPress = function (title) {
    setSelectedTitle(title);
  };

  return (
    <SafeAreaView>
      <ContainerBox>
        <TitleText>Title</TitleText>
        <TopBox>
          {Array.from({length: 6}, (_, i) => (
            <ButtonSet
              title={`Button${i + 1}`}
              selected={selectedTitle}
              onPress={onPress}
            />
          ))}
        </TopBox>
      </ContainerBox>
    </SafeAreaView>
  );
};

export default App;

 

 

 

영어, 중국어 공부중이신가요?

홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!

한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어