React native 에서는 display:block 이 안된다.

1. 내가 구현하고 싶은 기능은 해당 버튼을 눌렀을때 hide 되어있던 컴포넌트가 show로 바뀌는 것이였다. 

그래서 display: none 으로 했다가  -> block 으로 바꾸면 되겠네  라고 생각하고 

 

display에 props 를 주어서 실행시켰더니 ..

 

이런 에러가 발생함...

내가 문법을 잘못썻나 해서 여러번 봤는데 

문법상 틀린건 없었음

역시나 구글신에게 물어보니

 

react native에 적용가능한 style 에는  display 가 없다고함

 

https://webisfree.com/2019-08-14/react-native-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0-hide

react native 컴포넌트 숨기기, hide

 

아래 링크를 찬찬히 읽어보고 

내가 사용한것은 

컴포넌트 요소에 조건문 추가하기 

{dp === false && (
            <ProfileButton onPress={() => setDp(true)}>
              <Text>비밀번호 변경</Text>
            </ProfileButton>
          )}
          {dp === true && (
            <ChangePwBox>
              <ProfileButton onPress={changePwHandler}>
                <Text>변경</Text>
              </ProfileButton>
              <ProfileButton onPress={() => setDp(false)}>
                <Text>취소</Text>
              </ProfileButton>
            </ChangePwBox>
          )}

dp 란 state 를 만든다음에 

해당 버튼을 누르면  dp 가 true로 바뀌면서  컴포넌트가 show 됨. 

아주편하면서 간단한 방법이다. 

최고