Expo (React Native)의 진입 점이되는 파일 App.js 변경

편리한 Expo

React Native를 쉽게 사용할 수 있다Expo, 편리하네요.
Expo CLI을 설치하고 초기화 명령을 실행하기 만하면 Android와 iOS를 모두 지원하는 React Native 앱의 병아리를 생성 할 수 있습니다.

$ npm install expo-cli -g
$ expo init sandbox-expo

이 후 몇 가지 질문에 대답하고,

$ cd sandbox-expo
$ yarn start # or `npm start`

이것만으로 앱 개발 환경이 일어납니다. 실기에서도 시뮬레이터에서도 OK.

파일 명명 규칙이 ..

expo init로 만들어진 프로젝트 히나가타를 보면 다음과 같은 느낌.

$ tree . -I node_modules
.
├── App.js
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── package.json
└── yarn.lock

1 directory, 7 files

엔트리 포인트의 파일명이 App.js 로 결정이 되어 있는 것이 곤란한 사람도 있을 것 같고, 다른 패스로 바꾸고 싶은 것은 자주 있는 것이 아닐까요. 파일명을 case-sensitive 로 하고 싶거나 하고 싶지 않은 등 여러가지 있을 것 같습니다.

진입점이 어떻게 지정되었는지 확인

Expo의 병아리가 엔트리 포인트를 지정하는 방법을 살펴 보겠습니다.

우선 package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

main 필드은 node_modules 다음 파일을 지정합니다.

그리고 node_modules/expo/appEntry.js :

import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

node_modules 아래에 설치된 expo/appEntry.js는 종속성이 순수한 약간 줄의 JavaScript임을 알 수 있습니다. registerRootComponent 함수을 호출하여 진입 점을 만들 수 있습니다.

진입점 맞춤설정

위에서 expo/appEntry.js 해당 진입점을 만들면 App.js 경로를 변경할 수 있음을 알 수 있습니다. 커스터마이즈를 해 봅니다.

$ cat ./package.json
{
  ...
  "main": "main.js",
  ...
}

$ tree . -I node_modules
.
├── app.json
├── assets
│   ├── icon.png
│   └── splash.png
├── babel.config.js
├── main.js
├── package.json
├── src
│   └── app.js
└── yarn.lock

2 directories, 8 files

// main.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from './src/app';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);

예를 들어 위와 같이 main.js를 만들고 App.js를 src/app.js로 다시 쓰고 package.json의 main 필드를 다시 쓰면 진입 점을 사용자 지정할 수 있습니다.