RN#4. Handling Text Input

해피데빙·2022년 7월 22일
0

DND

목록 보기
21/33

TextInput

  • 키보드를 이용해서 앱에 텍스트 넣을 때 사용하는 컴포넌트
  • core componen
  • props : auto-correction, auto-capitalization, placeholder text, 키보드 타입 등

onChangeText : 사용자의 input 값 변경 시 호출
onSubmitEditing : 텍스트 제출 시 호출될 함수를 받는다
onFocus

  • 어떤 props들은 muliline에 따라 사용 가능한지 여부가 달라진다
  • multiline=true : 한쪽에서만 적용된 border styles 사용 불가능
    그러므로 병행하고 싶으면 View 안에 TextInput을 사용해서 View에 스타일을 넣어 줘야 한다
  • 디폴트 : 바닥에 border가 있다
    padding: 시스템에서 제공하는 bg-img에 의해 패딩이 결정되고 변경 불가능
    그러므로 해결 방법
    1. height를 명시적으로 설정하지 않거나
    2. border의 display를 없애는 방식 : ex.underlineColorAndroid to transparent.

cf. Android text selection에서 주의할 점

Note that on Android performing text selection in an input can change the app's activity windowSoftInputMode param to adjustResize.
This may cause issues with components that have position: 'absolute' while the keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';

const PizzaTranslator = () => {
  const [text, setText] = useState('');
  //text가 계속 바뀌니까 state에 저장 
  
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && '🍕').join(' ')}
        //띄어쓰기는 피자로 번역하지 않기 위해 && 사용 
      </Text>
    </View>
  );
}

export default PizzaTranslator;
profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17

0개의 댓글