레이아웃 연습 #2 정보
레이아웃 연습 #2
본문
https://g6ling.gitbooks.io/react-native-tutorial-korean/content/1-6ko.html
웹 플레이어에서는 멀티플 파일지원이 안되기 때문에.. 하나의 파일로 만들어서 테스트 해 봅니다.
컴퍼넌트를 별도의 파일로 자르는 것은 위의에 설명이 나오니 쉽게 할 수 있습니다.
View와 Text 와 style만을 사용해서 아래와 같이 만들어 봤습니다.
고정을 사용한 곳은 margin정도만 사용을 했습니다. 아이폰 7과 7 Plus등 화면 사이즈가 다른 제품에서도 비슷한 모양으로 보여질려고 한다면, 많은 부분이 flexbox를 사용해 봐야 될 것 같습니다.
시간되시면 만들어 보세요.
import React, { Component } from 'react';
import { Text, View, StyleSheet, AppRegistry } from 'react-native';
class NavBar extends Component {
render() {
return (
<View style={styles.navbar}>
<Text style={styles.textColor}>더보기</Text>
</View>
)
}
}
class User extends Component {
render() {
return (
<View style={styles.user}>
<View style={{flex:2, flexDirection: 'row', margin: 3, backgroundColor: 'antiquewhite', justifyContent: 'space-around'}}>
<View style={{flex:1, margin: 3, backgroundColor: 'aqua'}}>
<View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 80}}>
</View>
</View>
<View style={{flex:3, flexDirection: 'column', margin: 3, backgroundColor: 'aqua', justifyContent: 'flex-start'}}>
<Text style={{ fontSize: 20, fontWeight: 'bold'}}>은애악</Text>
<Text>강철 / g6lingp</Text>
<Text>서울대 16학번</Text>
</View>
</View>
<View style={{ flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'bisque', justifyContent: 'space-around'}}>
<View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-between', }}>
<View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>
</View>
<View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>
<Text style={{paddingLeft: 5}}>내가 쓴 글</Text>
</View>
</View>
<View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-around'}}>
<View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>
</View>
<View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>
<Text style={{paddingLeft: 5}}>댓글 단 글</Text>
</View>
</View>
<View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-between'}}>
<View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>
</View>
<View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>
<Text style={{paddingLeft: 5}}>스크랩</Text>
</View>
</View>
</View>
</View>
)
}
}
class ButtonGroup extends Component {
render() {
return (
<View style={styles.buttongroup}>
</View>
)
}
}
class Ads extends Component {
render() {
return (
<View style={styles.ads}>
</View>
)
}
}
class Taps extends Component {
render() {
return (
<View style={styles.taps}>
</View>
)
}
}
class gitbookTest extends Component {
render() {
return (
<View style={styles.container}>
<NavBar />
<User />
<ButtonGroup />
<Ads />
<Taps />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
},
navbar: {
height: 50,
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'orangered',
},
textColor: {
color: 'white',
fontSize: 20
},
user: {
flex: 2,
backgroundColor: 'darkturquoise'
},
buttongroup: {
marginTop: 40,
flex: 3,
backgroundColor: 'lightgreen',
},
ads: {
flex: 1,
backgroundColor: 'mediumpurple',
},
taps: {
flex: 1,
backgroundColor: 'blue'
},
rightBottom: {
flex: 2,
backgroundColor: 'yellow'
}
});
AppRegistry.registerComponent('awesome', () => gitbookTest);
0
댓글 0개