[React Native 태그] Touchable 요소들, TextInput

TouchableOpacity

TouchableOpacity - Expo Documentation

<TouchableOpacity
    style={styles.button}
    onPress={onPress}
    activeOpacity={0.6} 
>
	<Text>Press Here</Text>
</TouchableOpacity>

TouchableOpacity 태그로 감싼 컴포넌트를 터치할 경우 해당 컴포넌트가 잠시 투명도를 갖게 된다.

onPress 외에도 onPressIn, onPressOut, onLongPress 속성을 추가할 수 있다.

activeOpacity={0.6}  투명도를 설정할 수 있다.

 

TouchableHighlight

TouchableHighlight - Expo Documentation

const [count, setCount] = useState(0);
const onPress = () => setCount(count + 1);
...

<TouchableHighlight onPress={onPress}>
	<Text>Click</Text>
</TouchableHighlight>

onPress 속성에 함수를 추가하기 전에는 아무 일도 일어나지 않는 것처럼 보인다.

마찬가지로 onPress 외에도 onPressIn, onPressOut, onLongPress 속성을 추가할 수 있다.

<TouchableHighlight activeOpacity={0.6} underlayColor="#DDDDDD" onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>

underlayColor: 컴포넌트를 클릭했을 때 뜨는 배경색을 설정할 수 있다.

activeOpacity: 배경색의 투명도를 조절할 수 있다.

 

 

TouchableWithoutFeedback

TouchableWithoutFeedback - Expo Documentation

<TouchableWithoutFeedback onPress={onPress}>
    <View style={styles.button}>
      <Text>Touch Here</Text>
    </View>
  </TouchableWithoutFeedback>

컴포넌트를 터치해도 겉보기에 아무 반응이 일어나지 않는다.

가장 빈번히 쓰이며, 컴포넌트 터치 시 이벤트가 발생하도록 할 때 쓰인다.

 

 

Pressable

TouchableOpacity 상단을 보면 pressable API를 추천하고 있다.

TouchableOpacity 에는 없는 상세한 속성들을 사용할 수 있다.

Pressable - Expo Documentation

hitSlope: 요소 바깥 어디까지 탭을 누르는 것을 감지할지 설정

 

 

 

TextInput

TextInput - Expo Documentation

React Native에서 Input, textarea 태그 역할을 수행하는 애

엄청 많은 props가 있다. 그 중 자주 쓰이는 것들을 정리해보았다.

placeholder

onFocus: input 부분을 터치해서 포커싱 되었을 때 함수 호출

onChangeText: input text가 바뀔 때 함수 호출

keyboardType: 한영키, 이메일, 숫자키 등등 키보드 타입 설정

• default
• number-pad
• decimal-pad
• numeric
• email-address
• phone-pad

returnKeyType: 키보드 우측 하단의 return 부분을 바꿀 수 있다.

• done
• go
• next
• search
• send

 

secureTextEntry: 비밀번호 입력할 때 

 

multiline: 여러 줄에 걸쳐 작성할 수 있도록 설정(input -> textarea)

 

autoCorrect: 맞춤법 자동 고침 t/f 여부 설정

autoCapitalize: 단어/문장 첫글자 대문자 여부 설정

 

onSubmitEditing: submit 시 이벤트 호출