1. flex 사용
flex는 화면 비율
style={styles.container}
style={styles.case1}
style={styles.case2}
);
}
}
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 (
style={styles.container}
style={styles.case1}
style={styles.case2}
style={styles.case3}
style={styles.case4}
style={styles.case5}
);
}
}
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 (
style={styles.container}
style={{height:'100%',width:'100%',resizeMode:'contain'}}
source={require('./img.jpeg')}
);
}
6. 최종
App.jsimport 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/
