Help us understand the problem. What is going on with this article?

Expo (React Native) のエントリポイントになるファイル App.js を変更する

More than 1 year has passed since last update.

便利な 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。
Screenshot 2019-03-15 15.45.53.png

Screenshot 2019-03-15 15.51.08.png

ファイルの命名規則が..

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.jssrc/app.js に書き換えて、 package.jsonmain フィールドを書き換えると、エントリポイントをカスタマイズすることができます。

tilecloud
地図専用クラウドサービスを提供するスタートアップ
https://geolonia.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away