React Native - Introduction

React Native프로젝트를 생성하고 Terminal을 새로 만든다 (VScode를 사용하고 있다.)

AVD를 실행시키고 Terminal에 react-native run-android를 입력하면, index.js를 최초로 접근하여 코드를 읽는다.

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

 

위에는 index.js이다. 같은 폴더에 있는 APP.js를 import 해서 APP이라 하고
AppRegistry.registerComponent(appName, () => App);를 통해 APP.js를 읽어 실행한다.

 

import React from 'react';
import {Text, View} from 'react-native';

const YourApp = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Try editing me! 🎉</Text>
    </View>
  );
}

export default YourApp;

 

위에는 React Native 공식 문서에 나오는 introduction의 코드이다. react-native에 있는 Text, View를 이용하여 화면에 문구를 출력하는 코드이다. View에 style을 적용시켰고, justifyContent는 상하 정렬을 나타내고, center로 값을 주었기 때문에 화면의 가운데에 위치한다.
또한, alignItems는 좌우 정렬을 나타내고, 마찬가지로 center로 값을 주어 좌우 중 가운데에 위치하게 할 수 있다.

다음은 출력 화면이다.