React-Native 에서 TextInput 사용해보기

<TextInput
  multiline // 라인 여러개 사용가능하게
  secureTextEntry // 비밀번호로 보이게함
  returnKeyType="send"
  keyboardType="ascii-capable"
  autoCapitalize={'sentences'} // 자동완성기능
  keyboardType="default" // 나오는 키보드 타입 설정
  onSubmitEditing={addToDo} // return 버튼을 눌렀을때 반응하는 것
  onChangeText={onChangeText}
  value={text}
  placeholder={working ? 'Add a To Do' : 'Where do you want to go?'}
  style={styles.input}
/>

• multiline : 멀티라인을 가능하게해준다.
• secureTextEntry : TextInput 요소의 값을 비밀번호로 보여준다.
• returnKeyType="send" : 키보드 자판의 enter를 다르게 보여줌 ⇒ 안드로이드의 경우 더 많고 다르게 보여줄 수 있음
• keyboardType=? 키보드 타입을 정해준다.
• autoCapitalize={'sentences'} : 자동완성기능 여부 선택
• onSubmitEditing={addToDo} : return 눌럿을때 동작시키기
• onChangeText={onChangeText} : 텍스트 변경시 동작하는 함수
• value={text} : TextInput의 값
• placeholder={} : 뒤에 보이게하는 값

styles설정

input: {
  backgroundColor: 'white',
  paddingVertical: 15,
  paddingHorizontal: 20,
  borderRadius: 30,
  marginTop: 20,
  fontSize: 18,
},

다음과 같은 화면으로 보여지게된다.