Rhapsodist

react-native

Button & TextInput

2020.03.01

Created By Rhapsodist

Rhapsodist

Button & TextInput

1. 개요

다음의 위젯에 대해 알아 보자.

  • Button
  • TextInput

2. Widget

2.1. Button

Web 이든 Mobile 이든 버튼의 역할은 중요하다. Web에서는 button 태그를 작성하고 그 안에 텍스트를 적어 넣는 방식이지만, React-native에서는 self close 하는 형식을 띄고 title 이라는 속성에 텍스트를 입력하게 되어있다. 또한 onClick 이 아닌 onPress 를 사용하여 event 를 발생시킨다는 점에 주의가 필요.

2020-01-17-12-55.png


2.2. TextInput

TextInput은 html의 input 과 같은 기능을 한다. 중요 속성으로는

속성특징
placeholder사용자에게 힌트를 줄 수있는 용도로 사용됨
multiline만약 TextInput의 입력범위를 넘어서게 되면 박스가 커지면서 다음 라인에서 입력 가능하게 됨
keybordType키보드 입력 방식을 선택할 수 있다.
onChangeTextonChange와 같은 기능으로, callback으로 event가 아닌 value 를 받는다.

2020-01-17-1-15.png

Share to ...

#react-native
#button
#text
#input
#widget
#react