diff --git a/docs/react-native/learn/getting-started/expo-build.png b/docs/react-native/learn/getting-started/expo-build.png new file mode 100644 index 0000000000..716f8fc54b Binary files /dev/null and b/docs/react-native/learn/getting-started/expo-build.png differ diff --git a/docs/react-native/learn/getting-started/launch-created-app.mdx b/docs/react-native/learn/getting-started/launch-created-app.mdx index 58a4dd7a9d..b2107da51e 100644 --- a/docs/react-native/learn/getting-started/launch-created-app.mdx +++ b/docs/react-native/learn/getting-started/launch-created-app.mdx @@ -76,3 +76,42 @@ Expo DevTools is running at http://localhost:19003 + +## アプリ実行の仕組み + +React Nativeアプリ実行の仕組みをかんたんに説明します。 + + + + + + + + + +![Image](react-native-build.png) + +起動コマンドを実行するとMetro Bundlerが起動した後、アプリのビルドが始まります。 + +`react-native run-ios` の場合iOSアプリがビルドされ、シミュレータにインストールされます。 +`react-native run-android` の場合Androidアプリがビルドされ、エミュレータにインストールされます。 + +その後、インストールされたアプリがMetro Bundlerを通してJava Scriptのソースを読み込み、実行します。 + + + + +![Image](expo-build.png) + +React Nativeのみの場合と異なりストア公開されているExpo Goアプリを端末にインストールして使用するため、アプリのビルドが不要です。 + +`expo start` を実行するとExpoの開発者ツールとMetro Bundlerが起動します。 +開発者ツールに記載されているQRコードを読み取ることで、Expo Goは同一無線ネットワーク内のMetro Bundlerに接続するよう設定されます。そしてMetro Bundlerを通してJava Scriptのソースを読み込み、実行します。 + + + diff --git a/docs/react-native/learn/getting-started/react-native-build.png b/docs/react-native/learn/getting-started/react-native-build.png new file mode 100644 index 0000000000..d2532b9c12 Binary files /dev/null and b/docs/react-native/learn/getting-started/react-native-build.png differ