TextInput 태그

RN에서 Input태그의 역할을 해주는 TextInput를 활용해보자

기본적인 특징은 폼 태그 따로 없이 엔터키로 submit이 된다는 점이다.

multiline

TextInput에서 여러줄을 사용하려고 할 때, multiline을 사용한다.
width와 height를 주고 사용하면 되는데, 여기서 주의할 점은 iOS환경에서는 텍스트가 상단부터 시작하지만 안드로이드환경에서는 텍스트가 중앙에서 시작한다.

✅이를 해결해 주는 것이 textAlignVertical이다.
textAlignVertical을 top으로 설정해주면 해결된다.

그래서 전체적으로 설정해야 할 코드를 확인해보자.

  <TextInput
    style={styles.input}
    placeholder="텍스트를 입력해주세요."
    multiline={true}	// true 지정 해줘야 여러줄 적용됨
  />
  
--CSS--
  input: {
    width: 250,		// 크기지정
    height: 100,	// 크기지정
    borderColor: '#999',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    textAlignVertical: 'top',	// iOS, 안드로이드 전부 상단에서 시작하게 설정
  };

keyboardAvoidingView

✅키보드가 화면을 가리지 않게 하려면 keyboardAvoidingView을 사용해야 한다.
behavior이라는 속성을 통해 방식을 정의한다.

• padding : 키보드가 열렸을 때 뷰 하단의 패딩을 설정한다
• height : 뷰 높이 자체를 변경한다
• position : 뷰의 위치를 설정한다

keyboardAvoidingView안에서 behavior은 이런식으로 선언한다.

behavior={Platform.select({ios: 'padding', android: undefined})
Platform.select에는 ios, android 두 가지의 반환값이 있다.
각자 키보드나 화면을 나타내는 디폴트값이 다르니 확인해 가면서 각각 필요한 요소를 입력해 주면 된다.

❗❗(ios에서만 되는지 확인 해야함!)
✅스크롤뷰는 안먹힐 수 있는데 그럴경우는, KeyboardAwareScrollView를 사용한다.
KeyboardAwareScrollView는 스크롤뷰를 감싸고있는 컴포넌트위에 씌워주면 된다.

return(
    <KeyboardAwareScrollView
      innerRef={ref => {
        this.scroll = ref
      }}>
      <View>
        <TextInput
          onFocus={(event) => {
            this._scrollToInput(ReactNative.findNodeHandle(event.target))
          }}
        />
      </View>
    </KeyboardAwareScrollView>
  )

---

모바일 앱 개발을 할 때 가장 신경써야 할 부분이,
모바일마다 환경(디스플레이 크기나 비율, 노치 등)이 다르다는 점을 고려해서 작업해야한다.
특히 OS가 다른 것은 디폴트값 자체가 다르니 양쪽 다 확인이 필수!