メインコンテンツへスキップ

既存アプリとの統合

React Native は、新しいモバイルアプリをゼロから始めるときに最適です。しかし、既存のネイティブアプリケーションに単一のビューやユーザーフローを追加する場合にもうまく機能します。いくつかのステップで、新しい React Native ベースの機能、画面、ビューなどを追加できます。

具体的な手順は、ターゲットとするプラットフォームによって異なります。

主要なコンセプト​

React Native コンポーネントを Android アプリケーションに統合するための鍵は次のとおりです。

  1. 正しいディレクトリ構造を設定する。
  2. 必要な NPM 依存関係をインストールする。
  3. Gradle 設定に React Native を追加する。
  4. 最初の React Native 画面用の TypeScript コードを記述する。
  5. ReactActivity を使用して React Native を Android コードと統合する。
  6. バンドラーを実行し、アプリが動作することを確認して統合をテストする。

コミュニティテンプレートの使用​

このガイドを進めるにあたり、React Native コミュニティテンプレート を参照することをお勧めします。このテンプレートには **最小限の Android アプリ** が含まれており、React Native を既存の Android アプリに統合する方法を理解するのに役立ちます。

前提条件​

開発環境のセットアップ と フレームワークなしで React Native を使用する ガイドに従って、Android 向け React Native アプリをビルドするための開発環境を設定してください。このガイドは、Activity の作成や `AndroidManifest.xml` ファイルの編集など、Android 開発の基本に慣れていることを前提としています。

1. ディレクトリ構造のセットアップ​

スムーズな体験を確保するために、統合された React Native プロジェクト用に新しいフォルダを作成し、その後、**既存の Android プロジェクトを** /android サブフォルダに **移動します**。

2. NPM 依存関係のインストール​

ルートディレクトリに移動し、以下のコマンドを実行します。

shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json

これにより、コミュニティテンプレートから `package.json` ファイルがプロジェクトにコピーされます。

次に、以下を実行して NPM パッケージをインストールします。

shell
npm install

インストールプロセスにより、新しい node_modules フォルダが作成されました。このフォルダには、プロジェクトのビルドに必要なすべての JavaScript 依存関係が保存されます。

`node_modules/` を .gitignore ファイルに追加してください（こちらはコミュニティのデフォルトです）。

3. アプリへの React Native の追加​

Gradle の設定​

React Native は React Native Gradle Plugin を使用して、依存関係とプロジェクトのセットアップを設定します。

まず、settings.gradle ファイルを編集し、これらの行を追加します（コミュニティテンプレートからの推奨通り）。

groovy
// Configures the React Native Gradle Settings plugin used for autolinking
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
// If using .gradle.kts files:
// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }
includeBuild("../node_modules/@react-native/gradle-plugin")

// Include your existing Gradle modules here.
// include(":app")

次に、トップレベルの build.gradle を開き、この行を含めます（コミュニティテンプレートからの推奨通り）。

diff
buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
+       classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

これにより、React Native Gradle Plugin (RNGP) がプロジェクト内で利用可能になります。最後に、アプリケーションの `build.gradle` ファイル（通常は `app` フォルダ内にある別の `build.gradle` ファイルです - コミュニティテンプレートのファイルを参照できます）にこれらの行を追加します。

diff
apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"

repositories {
    mavenCentral()
}

dependencies {
    // Other dependencies here
+   // Note: we intentionally don't specify the version number here as RNGP will take care of it.
+   // If you don't use the RNGP, you'll have to specify version manually.
+   implementation("com.facebook.react:react-android")
+   implementation("com.facebook.react:hermes-android")
}

+react {
+   // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
+   autolinkLibrariesWithApp()
+}

最後に、アプリケーションの `gradle.properties` ファイルを開き、次の行を追加します（こちらはコミュニティテンプレートのファイルを参照）。

diff
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+newArchEnabled=true
+hermesEnabled=true

マニフェストの設定​

まず、`AndroidManifest.xml` にインターネット権限があることを確認してください。

diff
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

+   <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">
    </application>
</manifest>

次に、**debug** `AndroidManifest.xml` で クリアテキストトラフィック を有効にする必要があります。

diff
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
+       android:usesCleartextTraffic="true"
+       tools:targetApi="28"
    />
</manifest>

いつものように、参照として使用できるコミュニティテンプレートの AndroidManifest.xml ファイルはこちらです: main および debug

これは、アプリケーションがローカルのバンドラーである Metro と HTTP 経由で通信するために必要です。

これは **debug** マニフェストにのみ追加するようにしてください。

4. TypeScript コードの記述​

अब हम असल में React Native को एकीकृत करने के लिए नेटिव Android एप्लिकेशन को संशोधित करेंगे।

最初に書くコードは、アプリケーションに統合される新しい画面の実際の React Native コードです。

index.js ファイルの作成​

まず、React Native プロジェクトのルートに空の `index.js` ファイルを作成します。

index.js は React Native アプリケーションの開始点であり、常に必要です。これは、React Native コンポーネントやアプリケーションの一部である他のファイルを `import` する小さなファイルであることも、必要なすべてのコードを含むこともあります。

私たちの index.js は次のようになります（こちらはコミュニティテンプレートのファイルを参照）。

js
import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('HelloWorld', () => App);

App.tsx ファイルの作成​

App.tsx ファイルを作成しましょう。これは TypeScript ファイルで、JSX 式を持つことができます。これには、Android アプリケーションに統合するルート React Native コンポーネントが含まれています（リンク）。

tsx
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode
              ? Colors.black
              : Colors.white,
            padding: 24,
          }}>
          <Text style={styles.title}>Step One</Text>
          <Text>
            Edit <Text style={styles.bold}>App.tsx</Text> to
            change this screen and see your edits.
          </Text>
          <Text style={styles.title}>See your changes</Text>
          <ReloadInstructions />
          <Text style={styles.title}>Debug</Text>
          <DebugInstructions />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: '600',
  },
  bold: {
    fontWeight: '700',
  },
});

export default App;

こちらはコミュニティテンプレートのファイルを参照

5. Android コードとの統合​

次に、React Native ランタイムを開始し、React コンポーネントをレンダリングするように指示するために、いくつかのネイティブコードを追加する必要があります。

Application クラスの更新​

まず、`Application` クラスを更新して、次のように React Native を適切に初期化する必要があります。

diff
package <your-package-here>;

import android.app.Application;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactHost;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactHost;
+import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.facebook.soloader.SoLoader;
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import java.util.List;

-class MainApplication extends Application {
+class MainApplication extends Application implements ReactApplication {
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+   return new DefaultReactNativeHost(this) {
+     @Override
+     protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }
+     @Override
+     protected String getJSMainModuleName() { return "index"; }
+     @Override
+     public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }
+     @Override
+     protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }
+     @Override
+     protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }
+   };
+ }

+ @Override
+ public ReactHost getReactHost() {
+   return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());
+ }

  @Override
  public void onCreate() {
    super.onCreate();
+   SoLoader.init(this, OpenSourceMergedSoMapping);
+   if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+     DefaultNewArchitectureEntryPoint.load();
+   }
  }
}

いつものように、こちらはMainApplication.kt のコミュニティテンプレートファイルを参照

ReactActivity の作成​

最後に、`ReactActivity` を拡張し、React Native コードをホストする新しい `Activity` を作成する必要があります。このアクティビティは、React Native ランタイムを開始し、React コンポーネントをレンダリングする責任があります。

java
// package <your-package-here>;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactActivityDelegate;

public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new DefaultReactActivityDelegate(this, getMainComponentName(), DefaultNewArchitectureEntryPoint.getFabricEnabled());
    }
}

いつものように、こちらはMainActivity.kt のコミュニティテンプレートファイルを参照

新しい Activity を作成するたびに、それを `AndroidManifest.xml` ファイルに追加する必要があります。また、`MyReactActivity` のテーマを `Theme.AppCompat.Light.NoActionBar`（または ActionBar のないテーマ）に設定する必要があります。そうしないと、アプリケーションが React Native 画面の上に ActionBar をレンダリングしてしまいます。

diff
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">

+     <activity
+       android:name=".MyReactActivity"
+       android:label="@string/app_name"
+       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+     </activity>
    </application>
</manifest>

これで、アクティビティは JavaScript コードを実行する準備ができました。

6. 統合のテスト​

アプリケーションに React Native を統合するためのすべての基本的なステップが完了しました。次に、TypeScript アプリケーションコードをバンドルにビルドするために Metro バンドラー を開始します。Metro の HTTP サーバーは、開発環境の `localhost` からシミュレーターやデバイスにバンドルを共有します。これにより、ホットリローディング が可能になります。

まず、プロジェクトのルートに次のような `metro.config.js` ファイルを作成する必要があります。

js
const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);

metro.config.js ファイルをコミュニティテンプレートファイルとして参照できます。

設定ファイルが配置されたら、バンドラーを実行できます。プロジェクトのルートディレクトリで次のコマンドを実行してください。

shell
npm start

次に、通常通り Android アプリをビルドして実行します。

アプリ内で React を利用したアクティビティに到達すると、開発サーバーから JavaScript コードが読み込まれ、表示されるはずです。

Android Studio でのリリースビルドの作成​

Android Studio を使用してリリースビルドを作成することもできます！これは、以前から存在していたネイティブ Android アプリのリリースビルドを作成するのと同じくらい簡単です。

React Native Gradle Plugin が、JS コードを APK/App Bundle 内にバンドルする処理を担当します。

Android Studio を使用していない場合は、次のようにしてリリースビルドを作成できます。

cd android
# For a Release APK
./gradlew :app:assembleRelease
# For a Release AAB
./gradlew :app:bundleRelease

次は何をしますか？​

この時点で、通常通りアプリの開発を続けることができます。React Native での作業についてさらに学ぶには、デバッグとデプロイのドキュメントを参照してください。