1. TouchableWithoutFeedback
TouchableWithoutFeedback 컴포넌트는 자식 컴포넌트의 이벤트가 발생할 때 아무런 효과도 주지 않게 해주는 컴포넌트이다.
💡
해당 컴포넌트는 하나의 자식 컴포넌트만 적용이 되므로 여러 개의 컴포넌트에 적용하고 싶을 때는 View 컴포넌트 안에 컴포넌트들을 넣어줘야한다.
—Example
export default App;
import React, { useState } from 'react';
import { View, StyleSheet, Text, TouchableWithoutFeedback } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => { setCount(count + 1) }
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text style={styles.countText}>Count: {count}</Text>
</View>
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableWithoutFeedback> </View>
)
}
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#dddddd',
padding: 10,
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
},
textinput: {
borderColor: '#7a42f4',
borderWidth: 1
}
})
export default App→ TouchableWithoutFeedback 컴포넌트안에 View를 클릭하면 렌더링은 되지만 애니메이션은 작동하지 않는다.
—Props
- disabled(boolean) : true면 동작을 하지 않고, false면 동작을 한다.
- onPress(function) : 터치 이벤트 발생시 수행하는 동작 정의
2. TouchableHighlight
TouchableWithoutFeedback의 반대 개념으로 터치 이벤트가 발생하는 시점에 자식 컴포넌트의 색상 투명도가 바뀌어서 터치 이벤트가 수행되었다는 것을 시각적으로 알려주는 컴포넌트이다.
💡
TouchableWithoutFeedback과 마찬가지로 하나의 자식뷰만 사용할 수있다.
—Example
mport React, { useState } from 'react';
import { View, StyleSheet, Text, TouchableHighlight } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => { setCount(count + 1) }
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text style={styles.countText}>Count: {count}</Text>
</View>
<TouchableHighlight onPress={onPress}>
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableHighlight> </View>
)
}
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#dddddd',
padding: 10,
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
},
textinput: {
borderColor: '#7a42f4',
borderWidth: 1
}
})
export default App→ 버튼 클릭시 하이라이트가 되는 걸 알 수 있다.
—Props
- 기본적으로 TouchableWithoutFeedback를 상속한다.
- activeOpacity(0~1.0) : 클릭 시 컴포넌트의 불투명도를 지정한다.(default : 0.85)
- underlayColor(string) : 클릭시 컴포넌트의 색상 지정을 해준다.
- onShowUnderlay(function) : 클릭 이벤트 호출 당시의 사용할 이벤트를 지정한다.
- onHideUnderlay(function) : 클릭이 끝나고 발생할 이벤트를 지정한다.
3. KeyboardAvoidingView
TextInput 같은 컴포넌트에서 키보드로 텍스트를 입력한 뒤 키보드를 다시 내릴려면 Android 같은 경우에는 뒤로가기 버튼을 누르면 되지만 IOS는 return키가 키보드가 내려지게 설정이 되어 있지 않으면 계속 활성화된 상태로 남아있는데 이것을 위해 만들어진 컴포넌트가 KeyboardAvoidingView이다.
—Example
export default App;
import React from 'react';
import {View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard} from 'react-native';
const App = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textinput}/>
<View style = {styles.btnContainer}>
<Button title="Submit" onPress={()=> null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
)
}
const styles = StyleSheet.create({
container: {
flex:1
},
inner: {
padding:24,
flex:1,
justifyContent: 'space-around',
},
header: {
fontSize: 36,
marginBottom: 48,
},
textinput: {
height: 40,
borderColor: "#000000",
borderBottomWidth: 1,
marginBottom: 36,
},
btnContainer: {
backgroundColor: 'white',
marginTop: 12
}
})
export default App;
→
KeyboardAvoidingView가 해주는 것은 키보드를 나타내고 없애는 것이 아니라 키보드의 크기만큼의 빈공간을 만들어 주는 역할이다.
→
Platform컴포넌트를 이용해 OS를 확인한 뒤 해당 OS에 맞는 behavior 속성을 결정한다.
→
TouchableWithoutFeedback컴포넌트 안에 onPress 속성에서
keyboard.dismiss함수를 적용하여 자식의 자식 컴포넌트 Button을 제외한 모든 공간을 클릭하면 키보드가 사라진다.
—Props
- behavior(enum) : 키보드가 나타날 때 어떻게 반응하는 지 알려주는 속성이다.
- height : KeyboardAvoidingView의 height가 키보드의 높이에 맞게 변경된다.(Android 권장)
- padding: KeyboardAvoidingView의 padding 속성이 키보드에 맞게 변경된다.(IOS 권장)
- position : 활성화된 textInput의 위치에 맞게 조정이 된다.
- enabled(boolean) : 활성화(true), 비활성화(false) default = true
Uploaded by Notion2Tistory v1.1.0