1. flex 사용
flex는 화면 비율
<View style={styles.container}>
<View style={styles.case1} />
<View style={styles.case2} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
case1: {
flex: 1,
backgroundColor: 'red',
},
case2: {
flex: 1,
backgroundColor: 'green',
},
}
container에 뷰에 2개의 case 뷰를 만듦
container는 가장 밖에 있는 화면이고 1개가 있기 때문에 현재는 전체 화면으로 보여진다. 그 container속에는 2개의 case가 있는데 각각 1:1의 비율로 존재한다.
flex를 가로의 비율로 사용하고 싶으면
flexDirection: 'row',
flex의 수직 정렬 방법을 설정하고 싶으면 alignItems를 사용
flex-start, center, flex-end, stretch, baseline의 5가지 속성을 가지고 있다.
flex의 수평 정렬 방법을 설정하고 싶으면 justifyContent를 사용
flex-start, cent, flex-end, space-between, space-around의 속성을 가지고 있다.
2. width, height 사용
flex는 전체 비율이면 width와 height는 각각 높이와 넓이를 설정할 수 있다.
상대값(%) 또는 절대값으로 정의가 가능하다.
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<View style={styles.case1} />
<View style={styles.case2} />
<View style={styles.case3} />
<View style={styles.case4} />
<View style={styles.case5} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
case1: {
width:100,
height:100,
backgroundColor: 'red',
},
case2: {
width:50,
height:100,
backgroundColor: 'green',
},
case3: {
width:150,
height:70,
backgroundColor: 'blue',
},
case4: {
width:"100%",
height:70,
backgroundColor: 'black',
},
case5: {
width:"50%",
height:"50%",
backgroundColor: 'yellow',
},
});
3. TouchableOpacity
기본 Button은 각 플랫폼에 따라 모양이 다르기 때문에 UI 조절에 제한적이다.
이를 해결하기 위해 TouchableOpacity라는 컴포넌트를 사용한다.
-> 터치 이벤트를 사용할 수 있는 View
4. defaultProps
부모 컴포넌트에서 속성을 입력하지 않았을 때 기본 값으로 동작함
static defaultProps = {
title: 'untitled',
buttonColor: '#000',
titleColor: '#fff',
onPress: () => null,
}
5. Image
source는 외주 주소를 통해 이미지를 가져오고
require는 로컬 경로를 통해 이미지를 가져온다.
resizeMode는 이미지의 크기를 자동으로 조절해준다.
cover, contain 속성이 있는데 주로 contain을 사용한다.
(cover는 가로 세로 중 좁은 부분이 100%를 차지할때 까지,
contain은 가로 세로 중 넓은 부분이 100%를 차지할 때 까지 -> 가로가 좁고 세로가 긴 이미지는 세로의 기준을 잡음)
render() {
return (
<View style={styles.container}>
<Image
style={{height:'100%',width:'100%',resizeMode:'contain'}}
source={require('./img.jpeg')}/>
</View>
);
}
6. 최종
App.js
import React, {Component} from 'react';
import {StyleSheet, Text, View, Image} from 'react-native';
import CustomButton from './CustomButton';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<View style={styles.header} />
<View style={styles.title}>
<Text style={{fontSize:35,color:'white'}}>새로운 일상의 시작{'\n'}지금 카카오미니를{'\n'}연결해보세요.</Text>
</View>
<View style={styles.content}>
<Image
style={{height:'100%',width:'100%',resizeMode:'contain'}}
source={require('./img.png')}/>
</View>
<View style={styles.footer}>
<CustomButton
buttonColor={'#444'}
title={'회원가입'}
onPress={() => alert('회원가입 버튼')}/>
<CustomButton
buttonColor={'#023e73'}
title={'로그인'}
onPress={() => alert('로그인 버튼')}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
backgroundColor: 'black',
},
header: {
width:'100%',
height:'5%',
backgroundColor: 'black',
},
title: {
width:'100%',
height:'18%',
justifyContent: 'center',
backgroundColor: 'black',
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingBottom:30,
backgroundColor: '#d6ca1a',
},
footer: {
width:'100%',
height:'20%',
//backgroundColor: '#1ad657',
},
});
CustomButton.js
import React, { Component } from 'react';
import {
TouchableOpacity,
Text,
StyleSheet,
} from 'react-native';
export default class CustomButton extends Component{
static defaultProps = {
title: 'untitled',
buttonColor: '#000',
titleColor: '#fff',
onPress: () => null,
}
constructor(props){
super(props);
}
render(){
return (
<TouchableOpacity style={[
styles.button,
{backgroundColor: this.props.buttonColor}
]}
onPress={this.props.onPress}>
<Text style={[
styles.title,
{color: this.props.titleColor}
]}>{this.props.title}</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
borderRadius: 5,
},
title: {
fontSize: 15,
},
});
참조:
https://yuddomack.tistory.com/entry/6React-Native-Navigation-%EA%B8%B0%EC%B4%88-2%EB%B6%80-%ED%99%94%EB%A9%B4-%EB%93%B1%EB%A1%9D-%ED%99%94%EB%A9%B4-%EC%9D%B4%EB%8F%99
https://hoony-gunputer.tistory.com/175
https://dev-yakuza.github.io/ko/react-native/react-navigation/
