⛏️

Expo CLIで作成したReact Nativeプロジェクトをexpo prebuildしたやつのディレクトリ構成を変える

2022/06/13に公開

React Native

Expo

tech

以下の続き。

上記で動かしたディレクトリ構成のままで expo prebuildするとエラー祭りやったのでメモ

前提

以下に沿って、Managed WorkflowのExpoアプリをBare Workflow(Nativeコートが使える)に変えた。

問題

expo initしたままの構成で expo prebuildした場合、以下のメッセージとともに package.jsonからmain項目が削除され、index.jsが作成される。先に挙げた記事で構成変えてたのでここがうまくいってなかったようなので直す。

Removed "main": "node_modules/expo/AppEntry.js" from package.json because we recommend using index.js as main instead

mainを手動で消す

/package.json

{
  "main": "src/App.tsx",
}

👇

package.json

{
  // 削除
}

index.jsを作成してregisterRootComponentする

App.tsxでやらせてたregisterRootComponentをここで行う

/index.js

import { registerRootComponent } from 'expo';

import App from './src/App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);

App.tsxも修正

修正前

/src/App.tsx

import { registerRootComponent } from 'expo';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

const App = () => {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
};

registerRootComponent(App);

修正後

/src/App.tsx

import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';

const App = () => {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
};

export default App;

✌

たぶんこれで動くはず

前提

問題

mainを手動で消す

index.jsを作成してregisterRootComponentする

App.tsxも修正

✌

Discussion