[React Native] 리액트 네이티브 샘플 코드

샘플 코드를 보면서 이전 게시물을 토대로 기본 앱의 소스 코드와 리액트 네이티브 프로젝트의 구조를 살펴보자!

 

 

Create React Native App으로 생성한 프로젝트의 시작 코드인 App.js

 

import React form "react";
import { StyleSheet, Text, View } from "react-native";

export default class App extends React.Component {
	render(){
    	return (
        	<View style={styles.container}>
            	<Text>Hello, world!</Text>
            </View>
		);
    }
}

const styles = StyleSheet.create({
	container : {
    	flex: 1,
        backgroundColor: "#fff",
        alignItem: "center"
        justifyContent: "center"
    }
});

 

전형적인 리액트 네이티브 프로젝트의 시작 코드 index.ios.js(index.android.js)

 

import React, {Component} form "react";
import { 
	AppRegistry,
    StyleSheet, 
    Text, 
    View 
} from 'react-native';

export default class FirstProject extends Component {
	render(){
    	return (
        	<View style={styles.container}>
            	<Text style={styles.welcome}>
                	Welcome to React Native
                </Text>
                <Text style={styles.instructions}>
                	To get started, edit index.ios.js
                </Text>
                <Text style={styles.instructions}>
                	Press Cmd+R to reload, {'\n'}
                    Cmd+d or shake for dev menu
                </Text>
            </View>
		);
    }
}

const styles = StyleSheet.create({
	container : {
    	flex: 1,
        justifyContent: "center",
        backgroundColor: "#F5FCFF",
        alignItems: "center",
    },
     welcome: {
    	fontSize: 20,
        textAlign: "center",
    	margin: 10,
    },
    instructions : {
    	color: '#333333',
        textAlign: "center"
    	marginBottom: 5,
    },
});

AppRegistry.registerComponent('FirstProject', () => FirstProject);

 

import React, {Component} form "react";
import { 
AppRegistry,
    StyleSheet, 
    Text, 
    View 
} from 'react-native';

 

부분을 보면 React를 import하는 방법은 일반적인데

그 다음 줄을 보면 , 사용하는 네이티브로 제공되는 모듈을 모두 명시적으로 import 하고 있다.

리액트 네이티브는 <div>처럼 바로 사용할 수 있는 것이 아니라

<View>와 <Text>와 같은 컴포넌트를 사용하고자 할 때 명시적으로 불러와야 한다.

StyleSheet나 AppRegistry와 같은 라이브러리 함수의 경우에도 이 구문을 이용하여 명시적으로 불러와야 한다.

 

- FirstProject 컴포넌트와 스타일 객체 -

export default class FirstProject extends Component {
	render() {
    	return (
        	<View style={styles.container}>
            	<Text style={styles.welcome}>
                	Welcome to React Native
                </Text>
                <Text style={styles.instructions}>
                	To get started, edit index.ios.js
                </Text>
                <Text style={styles.instructions}>
                	Press Cmd+R to reload, {'\n'}
                    Cmd+d or shake for dev menu
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
	container : {
    	flex: 1,
        justifyContent: "center",
        backgroundColor: "#F5FCFF",
        alignItems: "center",
    },
     welcome: {
    	fontSize: 20,
        textAlign: "center",
    	margin: 10,
    },
    instructions : {
    	color: '#333333',
        textAlign: "center"
    	marginBottom: 5,
    },
});

리액트 네이티브의 모든 스타일은 스타일시트 대신에 스타일 객체를 통해 작성하게 된다.

StyleSheet 라이브러리를 활용하여 스타일 객체를 작성하는 것이 표준 방법이다.

<Text>컴포넌트에 글자 스타일에 해당하는 fontSize속성을 지정할 수 있고 레이아웃 방법은 flexbox를 이용해 지정한다.

 

 

 

 

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)