레이아웃 연습 #1
https://g6ling.gitbooks.io/react-native-tutorial-korean/content/1-5ko.html 참조
광고까지 하면 크게 5개로 나눠 집니다.
NavBar, User, ButtonGroup, Ads, Taps로.. 가능하면 Fixed Height를 사용하지 말고, Flex를 사용해서 만들어 보세요..
*** 코드가 길어지니 에러가 나네요.. 아래와 같이 만들어 봤습니다.
아래의 코드를 밑의 글의 링크에 카피 & 페이스트로 테스트 해 보세요
[code]
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>
)
}
}
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);
[/code]