[React Native] useState 를 이용해 Expandable View 만들기

Material UI 에서 정말 맘에드는 Expandable 한 View 를 찾았는데

native 에는 지원을 안하는건지 돌아가지를 않아서 직접 간단하게 구현해보려고 한다.

일단 기능 구현에 집중한 뒤 , 스타일을 이쁘게 다듬어 보자

해당 화면에서 OPEN 이라는 버튼을 누르면 

이렇게 파란 화면이 펼쳐지는 expandable View 를 만들어보자!

 

 

버튼을 눌렀을때

 

경우 1) 파란색 View 가 열려져있는경우 width : 0 px , height : 0px 로 바꾸고

경우 2) 파란색 View 가 닫혀져있는경우 width : 100% , height : 300px 로 바꾸자

 

 

구조잡기

//빨간색 View
<View>
        <Image
          source={require('../images/dog.jpg')}/>
        <Text>귀여운 강아지</Text>
        <Button
          title="open"
          onPress={changeView}/>
</View>

//파란색 View
<View>
        <Detail sizes={sizes}>  // Detail 은 styled component 로 따로 설정한 컴포넌트
          <Text>열렸습니다!</Text>
        </Detail>
</View>

- Detail 을 보면 , props 로 sizes 를 넘겨준다.

- Button 을 누르면 changeView 가 실행될 예정이다. changeView 는 파란색 View 의 width 와 height 를 바꿔주어야한다.

 

Detail 의 style 설정 ( styled-components 이용 )

const Detail =  styled.View`
    background-color : #0000ff;
    width : ${props => props.sizes.width};
    height : ${props => props.sizes.height};
`;

- width 는 받아온 props 의 sizes 객체안의 width 라는 키에 대한 value 로 설정

- height는 받아온 props 의 sizes 객체안의 height 라는 키에 대한 value 로 설정

( 밑에서 width 와 height 를 모두 '0px' 로 초기화했으므로 처음 값은 둘 다 0px 이다 )

 

useState 작성

// useState 의 기본인자는 2개. 첫번째 인자는 변수 , 두번째 인자는 그 변수를 바꿔주는 함수
// useState( ______ ) : 밑줄친 곳에 뭔가 넣으면 해당 인자로 변수를 초기화해준다.
// 우리는 width 와 height 두개를 모두 바꿔야 하므로 { } 로 감싸 객체형태로 넣어준다.
const [sizes,setSizes] = useState({
    width:'0px',
    height:'0px'
});

 

changeView 작성

const changeView = () => {
    if(sizes.width=='0px'){ // 닫혀있는경우 
      setSizes({
          width:'100%',
          height:'300px'
      });
    }
    else // 열려있는경우
      setSizes({
        width:'0px',
        height:'0px'
      });
}

 

완성 결과물

 

state 를 여러개 넘기는 것에 대해서 생각보다 오래 고민했다.

처음에 array 로 씌웠는데 작동이 안되길래 객체 상태 그대로 넘기니까 작동이 잘되더라..

 

이제 만들어진 해당 컴포넌트를 이쁘게 다듬어보자 :)