React Native) Component 활용하기 - 2

이미지, 텍스트 인풋 컴포넌트 활용에 대해 알아봄

 

 

---

 

---

Image 컴포넌트

보통 /assets 폴더에 넣어서 관리

화면 밀도에 따라 이미지 여러개 배치 가능
예시) circle.png, circle@2x.png, circle@3x.png 와 같이 @를 써서 밀도만 다른 이미지 배치

운영체제에 따라서 이미지 여러개 배치 가능
예시) circle.ios.png, circle.android.png 와 같이 구분해서 이미지 배치

Image 컴포넌트 사용법
- source : 경로 지정, 경로 입력은 require() 함수 입력
[예제]

<Image Source={require('../assets/images/circle.png')} />

- resizeMode : 이미지 크기 조정될 때 이미지 처리할 방식 지정
* cover : 이미지 가로세로 비율 유지하여 리사이징. width, height가 이미지 가로세로 비율과 다르면 이미지 잘림(기본값)
* contain : 이미지 가로세로 비율 유지하여 리사이징. 이미지 모든 영역이 뷰 안에 보임(안잘리고 여백 생김)
* stretch : 이미지 가로세로 비율 유지하지 않고 뷰 크기에 맞춰 리사이징
* repeat : 뷰 크기가 이미지 크기보다 커지면 바둑판식으로 이미지 반복
* center : 이미지를 뷰 중앙에 배치. contain과 비슷. 뷰가 이미지 보다 커지면 원본 사이즈 유지한채 여백만 늘어

외부 이미지 사용하기
source에 uri 객체 값을 입력함
[예제]

<Image source={{uri: 'https://via.placeholder.com/150'}} />

---

 

TextInput 컴포넌트

키보드 입력을 받기 위한 컴포넌트
- placeholder : 아무 것도 입력하지 않았을 때 보여주는 기본 텍스트

<TextInput placeholder="입력하세요." />

[iOS 키보드 가림 현상]
iOS에서는 기본 설정이 키보드 화면이 TextInput 창을 가림(android는 안가림)
KeyboardAvoidingView로 해당 영역을 확보해줘야 함
[예시]

(...)
import {StyleSheet, KeyboardAvoidingView, Platform} from 'react-native';
(...)

(...)
<KeyboardAvoidingView
	behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    style={styles.avoid}>
    (...)
</KeyboardAvoidingView>
(...)

const styles = StyleSheet.create({
	avoid: {
    	flex: 1,
    },
});

behavior Props에 값을 넣어 영역 확보
- padding : 하단에 패딩 설정
- height : 뷰 높이 자체 변경
- position : 뷰 위치 설정

[Platfrom.OS 대신 Platform.select 사용]

<KeyboardAvoidingView
	behavior={Platform.select({ios: 'padding', android: undefined})}
    style={styles.avoid}>
    
//혹은

<KeyboardAvoidingView
	behavior={Platform.select({ios: 'padding'})}
    style={styles.avoid}>

useState로 텍스트 상태값 관리
- value : TextInput 값 설정
- onChangeText : 내용 수정 시 호출되는 콜백 함수

const [text, setText] = useState('');

return (
    <TextInput
        placeholder="할 일을 입력하세요."
        style={styles.input}
        value={text}
        onChangeText={setText}
    />
);

[Enter(return) 키 눌렀을 때 동작 및 Key Type 설정]
- onSubmitEditing : Enter(return) 키 눌렀을 때 호출되는 함수
- returnKeyType
  * 플랫폼 공통 : done(완료), go(이동), next(다음), search(검색), send(보내기)
  * iOS : default(기본), emergency-call(긴급 통화), google(검색), join(가입), route(이동), yahoo(검색)
  * Android : none(일반 Enter), previous(뒤로)

<TextInput
    placeholder='할일을 입력하세요.'
    style={styles.input}
    value={text}
    onChangeText={setText}
    onSubmitEditing={onPress}
    returnKeyType="done"
/>

---

 

커스텀 버튼 만들기

View와 Image를 Touchable 컴포넌트로 감싸  버튼 만들기

Touchable 컴포넌트 4종류
- TouchableHighlight : 터치했을 때 배경색 변경
- TouchableNativeFeedback : 터치했을 때 안드로이드에서 물결 효과 보여줌(iOS에서는 오류 발생)
- TouchableOpacity : 터치했을 때 투명도 조정 (activeOpacity Props에 0~1 사이값 입력, 기본값 : 0.2)
- TouchableWithoutFeedback : 터치했을 때 아무 효과도 적용 안됨

React native Custom button