이런 식의 강좌는?
http://sir.kr/so_app/1244 에 있는 내용입니다.
아래와 같이 만들어 보는 것 입니다.
import React, { Component } from 'react';
import { View, StyleSheet, AppRegistry } from 'react-native';
class gitbookTest extends Component {
render() {
return (
<View>
</View>
}
}
}
const styles = StyleSheet.create({
});
AppRegistry.registerComponent('gitbookTest', () => gitbookTest);
위의 코드는 기본 골격입니다. 이 안에 코드를 넣어서 위와 같이 만들어 보세요.
크게 가로, 세로로 1대1이고(left, right), 오른쪽은 위, 아래 1대1로(rightTop, leftTop)
먼저 left right를 나눠 보시죠..
class gitbookTest extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.left}>
</View>
<View style={styles.right}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
left: {
flex: 1,
backgroundColor: 'red'
},
right: {
flex: 1,
flexDirection: 'column',
},
});위의 코드를 카피해서 넣어 보세요
왼쪽에 빨간색이 나왔나요?
다음은 오른쪽을 2칸으로 나눠야 겠죠.. 방향을 column으로 하고 righTop, rightBottom
class gitbookTest extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.left}>
</View>
<View style={styles.right}>
<View style={styles.rightTop}>
</View>
<View style={styles.rightBottom}>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
left: {
flex: 1,
backgroundColor: 'red'
},
right: {
flex: 1,
flexDirection: 'column',
},
rightTop: {
flex: 1,
backgroundColor: 'blue'
},
rightBottom: {
flex: 1,
backgroundColor: 'yellow'
}
});제대로 나왔나요?
게시판 목록
앱개발
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 428 | 9년 전 | 1103 | |||
| 427 | 9년 전 | 1736 | |||
| 426 | 9년 전 | 889 | |||
| 425 | 9년 전 | 1121 | |||
| 424 | 9년 전 | 1084 | |||
| 423 | 9년 전 | 1182 | |||
| 422 | 9년 전 | 1104 | |||
| 421 | 9년 전 | 1423 | |||
| 420 | 9년 전 | 1070 | |||
| 419 | 9년 전 | 1550 | |||
| 418 | 9년 전 | 1258 | |||
| 417 | 9년 전 | 1004 | |||
| 416 | 9년 전 | 1235 | |||
| 415 | 9년 전 | 1098 | |||
| 414 | 9년 전 | 1161 | |||
| 413 | 9년 전 | 1169 | |||
| 412 | 9년 전 | 1233 | |||
| 411 | 9년 전 | 1193 | |||
| 410 | 9년 전 | 2057 | |||
| 409 | 9년 전 | 1293 | |||
| 408 | 9년 전 | 1151 | |||
| 407 | 9년 전 | 1048 | |||
| 406 | 9년 전 | 2394 | |||
| 405 | 9년 전 | 1183 | |||
| 404 | 9년 전 | 1091 | |||
| 403 | 9년 전 | 913 | |||
| 402 | 9년 전 | 1198 | |||
| 401 | 9년 전 | 993 | |||
| 400 | 9년 전 | 1086 | |||
| 399 | 9년 전 | 1412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기