ReactNative flexBox 소스 컴포넌트 분리

React & React Native 2018. 11. 17. 18:55

앞에서 연습한 소스를 NavBar, Body를 컴포넌트로 나눌 수 있다.


style.js 파일을 생성하여 css별로 파일로 생성한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from "react";
import { StyleSheet } from "react-native";
 
 
const styles = StyleSheet.create({
    container : {
     flex : 1 ,
     flexDirection: 'column'
    },
    body : {
     flex : 1,
     flexDirection : 'row'
    },
    left : {
        flex : 1,
        backgroundColor : 'red'       
    },
    right : {
        flex : 2 ,
        flexDirection : 'column'
        
    },
    rightTop : {
         flex : 1,
         backgroundColor : 'blue'
    },
    rightBottom : {
         flex : 1 , 
         backgroundColor : 'yellow'
    },navBar : {
         //flex : 1,       
         height : 60,
         justifyContent : 'center',
         alignItems : 'center',
         backgroundColor : 'gray'
    }
 });
 
export default styles;
cs

[style.js]



NavBar 영역부분만 render링 영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class NavBar extends Component {
    render() {
      return (
        <View style={styles.navBar}>
            <Text>
                NavBar
            </Text>
        </View>
      )
    };
}
 
export default NavBar;
cs

[NavBar.js]


Body 영역 render  영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class Body extends Component {
    render() {
      return (
        <View style={styles.body}>
            <View style={styles.left}>
            </View>
            <View style={styles.right}>
                <View style={styles.rightTop}>
                </View>
                <View style={styles.rightBottom}>
                </View>
            </View>
        </View>
      )
    };
}
 
export default Body;
cs

[Body.js]




Body, NavBar import를 추가하여 컴포넌트 형태로 호출한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
import Body from "./Body";
import NavBar from "./NavBar";
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           <View style={styles.container}>
                <NavBar />
                <Body />
           </View>           
        );
    }
 
}
 
export default FlexBox1;
cs

[FlexBox1.js]


참초 : 한빛미디어 리엑트 네이티브 듀토리얼 



저작자표시 비영리 변경금지

'React & React Native ' 카테고리의 다른 글

undefined is not an object (evaluating '_react.PropTypes.number')  (0) 2018.11.19
React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 연습2  (0) 2018.11.16
ReactNative flexBox 연습1  (0) 2018.11.15
리액트란? (React)  (0) 2018.10.21
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바