component와 screen

폴더 구조에 대한 내용으로

components/ : 공통으로 사용하는 컴포넌트들
screens/ : 화면으로 사용하는 컴포넌트

라고 생각하면 된다

Login 화면 만들기

screen 안에 SignInScreen 화면을 만든다.

import { View, StyleSheet, Text, Image } from 'react-native';

const SignInScreen = () => {
	return (
		<View style={styles.container}>
			<Image
				source={require('../../assets/test.png')}
				style={styles.image}
			></Image>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	image: {
		width: 200,
		height: 200,
	},
});

export default SignInScreen;

Image에서 source 가져올 때 오프라인 url : require() 로 가져옴 온라인 url : url 을 사용함

그리고 여기서 image 값은

ppi (pixel per inch)

디스플레이 속에 픽셀의 밀집도를 의미함 ppi가 클 수록 더 크게 볼 수 있다.

dp

react native에서는 dp 라는 단위를 사용함 dp(density-independent pixels) 독립적인 크기를 가진 단위임.

ppi, dp 간의 관계?

200 x 400 px => 100 x 100 px 이미지 400 x 600 px => 200 x 200 px 이미지

iphone 11 : 450 ppi iphone 10 : 326ppi

@3x @2x 를 알아서 가져오게 됨.

이미지 원본의 비율을 맞춰 크기 조절하기

<Image
	source={require('../../assets/test.png')}
	style={styles.image}
	resizeMode="cover"
></Image>

cover : 원본 비율 유지, 이미지가 영역 전체를 채우도록 확대 contain : 원본 비율 유지, 이미지가 영역 내에 보이는 선에서 확대 stretch : 원본 비율 무시, 이미지가 영역 전체를 채우도록 확대 repeat : 영역의 크기가 이미지보다 크면, 바둑판 배열로 이미지 반복 center : 이미지 중앙정렬 , 이미지보다 영역이 커도 이미지 크기 조절하지 않음 이미지보다 영역이 작으면 이미지 크기 조절

text input 받기

TextInput을 사용하면 된다. props를 여러가지 사용해야 함

placeholder : 도우미

import { TextInput, Text, View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

const Input = ({ title, placeholder }) => {
	return (
		<View style={styles.container}>
			<Text style={styles.title}>{title}</Text>
			<TextInput
				style={styles.input}
				placeholder={placeholder ?? title}
				placeholderTextColor={'#a3a3a3'}
			></TextInput>
		</View>
	);
};

Input.propTypes = {
	title: PropTypes.string,
	placeholder: PropTypes.string,
};

const styles = StyleSheet.create({
	container: {
		width: '100%',
		paddingHorizontal: 20,
		marginVertical: 10,
	},
	title: {
		marginBottom: 4,
	},
	input: {
		borderWidth: 1,
		borderRadius: 8,
		paddingHorizontal: 20,
		height: 42,
	},
});

export default Input;