React Nativeのプロジェクトでsrcフォルダを使う場合

Summary (概要)

using Mac
using expo (version 45)
using React Native (version 0.68.2)
using typescript
using VScode
using node (version 16)

expoのversionは45とします。これは、2022年8月の時点でexpoの最新versionは46ですが、AdMobを使う場合、45と46でインストールするパッケージが違って46だと面倒なので、とりあえず45で確実に開発したいためです。

Procedure for creating a new project (新規プロジェクトの作成手順)

//ターミナルを立ち上げて、cdでプロジェクトフォルダの位置を決めて移動する
$ cd ~/[なんたらかんたら]

$ expo init [プロジェクト名]

// expoのversionをダウングレードする。(しなくてもよい)
$ expo upgrade 45

// カレントディレクトリの位置を変更する
$ cd [プロジェクト名]

// expoのサーバを立ち上げる
$ expo start

// iOS simulatorを立ち上げる
// Press i (iボタンを押す)

// Android simuralorを立ち上げる(Launching the android simulator may not go well. Good Luck!!)
// Press shift + i (shift + iボタンを押す)
// シミュレータを選択する。

// iPhoneとAndroidのemulatorの両方でApp.tsxのファイルが表示されたことを確認する
// expoを使うと、emulatorの立ち上げが楽なので、自分はexpoを使う開発をしています。
// Using expo makes it easier to launch an emulator, so I'm developing using expo.

Check with simulator (シミュレータで確認する)

Once you have done this, please check the display of React Native on the emulator once. It is OK if the App.tsx screen is displayed.
(ここまでできたら、一度emulatorでReact Nativeの表示を確認して下さい。App.tsxの画面が表示されていればOKです。)

npm installします

Please install the required packages. Contents are omitted.

必要なパッケージをインストールしてください。内容は省略します。

React Nativeのプロジェクト構成を変える

I want to use src folder (srcフォルダを使いたい)

プロジェクト直下は、設定ファイルなどが複数あるので、混ざらないようにsrcフォルダにjavascriptファイルをまとめます。

srcの下にcomponentsフォルダを作成します。以下のようなプロジェクト構成を目指します。

プロジェクトフォルダ
├── 省略(omit)
├── src
│   ├── assets
│   ├── components
│   ├── constants
│   └── hooks
│   └── App.tsx     (App.tsxファイルはここに移動する)
├── tsconfig.json
├── package.json
└── 省略(omit)
If you move the App.tsx file, the emulator will display an error, so correct App.tsx.
(App.tsxファイルを移動すると、emulatorがエラー表示になりますので、App.tsxを修正します。)
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { registerRootComponent } from 'expo'; // 追加

export default function App() {
  return <>
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  </>;
}

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

registerRootComponent(App); // 追加

プロジェクトのエントリーポイントを変更します。

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

typescriptのError ('React’ must be in scope when using JSX)が出るので、.eslintrc.jsに1行addします。

module.exports = {
  'rules': {
    'react/react-in-jsx-scope': 'off', // ← Add
  },
};

Check with emulator (エミュレータで確認する)

If you can do this, please check the display of React Native in the emulator. The error should have disappeared.
(ここまでできたら、emulatorでReact Nativeの表示を確認して下さい。errorが消えているはずです。)