React-native TextInput secure( input password )

역시 어떤 기술을 사용하고자 할때는, document를 잘 봐야 한다...

 

 

HTML 에서는 <input /> 태그의 type 속성을 지정함으로써, password 등을 입력하면,

각 브라우저는 정의된 대로 password input을 출력해준다.

그러면 입력시에 *** 처리되면서 가려준다.

 

reactNative의 TextInput은 기본적으로 그런 type props가 없다.

그래서 비밀번호 입력이 필요한 폼 작업시에는

검색을 통해 서드파티 컴포넌트를 찾아 사용하게 되는데,

결국엔 TextInput 을 가지고 만들어 놓은 것이기 때문에,

만약 심플하게 구성하고자 한다면, 서드파티 컴포넌트가 가지고 있는

화려하거나 혹은 신박한 효과(라벨이 움직인다거나, 튀어나온다거나, 애니메이트되는) 제외하고

 

secureTextEntry Props를 주면 된다.

secureTextEntry={true} 인 경우,

***처리 하여 입력한대로 보이지 않게 가려주며,

secureTextEntry={false} 인 경우,

다시 입력한대로 보이도록 해주기 때문에,

Icon 을 활용하여, 서드파티 컴포넌트와 동일하게 구성할 수 있다.

 

자세한 API에 대해서는 하단의 문서를 확인하자

https://facebook.github.io/react-native/docs/textinput