레이아웃 연습 #3 정보
레이아웃 연습 #3
본문
https://g6ling.gitbooks.io/react-native-tutorial-korean/content/1-7ko.html
에 나온 버튼 그룹으로.. 이번에는 this.props라는 것을 사용해서 반복되는 컴포넌트 처리를 해 보세요
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 Button extends Component {
render () {
return (
<View style={{flex: 1, flexDirection: 'column', borderWidth: 0.5}}>
<View style={{flex:2, backgroundColor: 'grey', margin: 2, minWidth: 20}}>
</View>
<View style ={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
<Text>{this.props.name}</Text>
</View>
</View>
)
}
}
class ButtonGroup extends Component {
render() {
return (
<View style={styles.buttongroup}>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<Button name='내 계정'/>
<Button name='친구'/>
<Button name='강의평가'/>
<Button name='학점계산기'/>
</View>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<Button name='쪽지함'/>
<Button name='공지사항'/>
<Button name='도움말'/>
<Button name='앱 설정'/>
</View>
</View>
)
}
}
class Ads extends Component {
render() {
return (
<View style={styles.ads}>
</View>
)
}
}
class Taps extends Component {
render() {
return (
<View style={styles.taps}>
<Button name='홈' />
<Button name='시간표' />
<Button name='커뮤니티' />
<Button name='모임' />
<Button name='더보기' />
</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: 'lightblue',
},
taps: {
flex: 1,
backgroundColor: 'mediumpurple',
flexDirection: 'row'
}
});
AppRegistry.registerComponent('gitbookTest', () => gitbookTest);
0
댓글 1개