SIR - 그누보드와 영카트 커뮤니티

이런 식의 강좌는?

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'
  }

});

제대로 나왔나요?

번호	제목	글쓴이	조회	날짜
1327	redshop의 배너	앱개발	1,608	8년 전
1326	redshop의 이미지 캐러셀	앱개발	1,167	8년 전
1325	redshop 의 탭	앱개발	1,087	8년 전
1324	Redshop의 서치바는	앱개발	1,259	8년 전
1323	Redshop의 헤더	앱개발	1,243	8년 전
1321	RedShop을 리액트 네이티브로 #1	앱개발	1,104	8년 전
1320	디자인 파일을 리액트 네이티브로...	앱개발	1,064	8년 전
1319	유투브 동영상 파이널 코드입니다.	앱개발	1,217	8년 전
1316	마이크로소프트의 코드푸쉬 3	앱개발	1,774	8년 전
1315	Weekdays 예제	앱개발	818	8년 전
1314	유투브 동영상에 대한 코드 #4 (두번째 비디오 까지..)	앱개발	820	8년 전
1313	프로토 타입(목업)화면을 리액트 네이티브로..	앱개발	1,401	8년 전
1312	유투브 동영상에 대한 코드 #3	앱개발	1,122	8년 전
1311	유투브 동영상에 대한 코드 #2	앱개발	1,170	8년 전
1310	아래 레이아웃 1,2,3의 풀 코드	앱개발	892	8년 전
1309	아이콘 32	앱개발	1,086	8년 전
1308	Apple 에서 TLS	앱개발	1,086	8년 전
1305	유투브 동영상에 대한 코드 #1	앱개발	1,244	8년 전
1304	크리스마스 아이콘들	앱개발	1,104	8년 전
1303	레이아웃 연습 #3 1	앱개발	1,064	8년 전
1302	레이아웃 연습 #2	앱개발	1,038	8년 전
1301	레이아웃 연습 #1	앱개발	1,563	8년 전
1300	Flexbox 공부하기 동영상 #3	앱개발	984	8년 전
1295	이런 식의 강좌 #2 2	앱개발	1,289	8년 전
1294	이런 식의 강좌는? 현재글	앱개발	1,169	8년 전
1293	결국은 reactJS도 알아야.. 1	앱개발	1,490	8년 전
1287	리액트 네이티브 책 소개	앱개발	1,455	8년 전
1285	리액트 네이티브 번역 완료.. 4	앱개발	1,397	8년 전
1283	[링크 공유] 안드로이드 스튜디오(Android Studio) 설치 방법 4	휴먼	2,050	8년 전
1279	리액트 네이티브용 그래픽 1	앱개발	988	8년 전

번호

제목

1327

redshop의 배너

1326

redshop의 이미지 캐러셀

1325

redshop 의 탭

1324

Redshop의 서치바는

1323

Redshop의 헤더