Przejdź do treści głównej
Wersja: Następna

Integracja z istniejącymi aplikacjami

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

React Native doskonale sprawdza się przy tworzeniu nowych aplikacji mobilnych od podstaw. Jednak równie dobrze nadaje się do dodawania pojedynczych widoków lub ścieżek użytkownika do istniejących natywnych aplikacji. W kilku krokach możesz dodać nowe funkcje, ekrany, widoki itd. oparte na React Native.

Konkretne kroki różnią się w zależności od platformy, na którą aplikacja jest przeznaczona.

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Kluczowe koncepcje​

Kluczem do integracji komponentów React Native z aplikacją na Androida jest:

  1. Skonfigurowanie poprawnej struktury katalogów

  2. Zainstalowanie niezbędnych zależności NPM

  3. Dodanie React Native do konfiguracji Gradle

  4. Napisanie kodu TypeScript dla pierwszego ekranu w React Native

  5. Integracja React Native z kodem Androida przy użyciu ReactActivity

  6. Testowanie integracji przez uruchomienie bundlera i sprawdzenie działania aplikacji

Korzystanie ze szablonu społecznościowego​

Podczas korzystania z tego przewodnika zalecamy użycie szablonu społecznościowego React Native jako punktu odniesienia. Szablon zawiera minimalną aplikację na Androida i pomoże ci zrozumieć, jak zintegrować React Native z istniejącą aplikacją na Androida.

Wymagania wstępne​

Postępuj zgodnie z przewodnikiem dotyczącym konfigurowania środowiska deweloperskiego i używania React Native bez frameworka, aby skonfigurować swoje środowisko do budowania aplikacji React Native na Androida. Ten przewodnik zakłada również, że znasz podstawy tworzenia aplikacji na Androida, takie jak tworzenie aktywności (Activities) i edycja pliku AndroidManifest.xml.

1. Konfiguracja struktury katalogów​

Aby zapewnić płynne działanie, utwórz nowy folder dla projektu zintegrowanego z React Native, a następnie przenieś istniejący projekt Androida do podfolderu /android.

2. Instalacja zależności NPM​

Przejdź do katalogu głównego i uruchom następujące polecenie:

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

This will copy the package.json file from the Community template to your project.

Następnie zainstaluj pakiety NPM, uruchamiając:

shell
npm install

Proces instalacji utworzył nowy folder node_modules. Ten folder przechowuje wszystkie zależności JavaScript wymagane do zbudowania projektu.

Add node_modules/ to your .gitignore file (here the Community default one).

3. Dodawanie React Native do aplikacji​

Konfiguracja Gradle​

React Native używa wtyczki Gradle dla React Native do konfiguracji zależności i ustawień projektu.

First, let's edit your settings.gradle file by adding those lines (as suggested from the Community template):

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")

Then you need to open your top level build.gradle and include this line (as suggested from the Community template):

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

This makes sure the React Native Gradle Plugin (RNGP) is available inside your project. Finally, add those lines inside your Applications's build.gradle file (it's a different build.gradle file usually inside your app folder - you can use the Community template file as reference):

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()
+}

Finally, open your application gradle.properties files and add the following line (here the Community template file as reference):

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

Konfiguracja manifestu​

Najpierw upewnij się, że masz uprawnienie do Internetu w pliku 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>

Następnie musisz włączyć ruchy w postaci czystego tekstu w debugowym pliku 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>

As usual, here the AndroidManifest.xml file from the Community template to use as a reference: main and debug.

Jest to konieczne, ponieważ twoja aplikacja będzie komunikować się z lokalnym bundlerem, Metro, poprzez HTTP.

Upewnij się, że dodajesz to tylko do manifestu w wersji debug.

4. Pisanie kodu TypeScript​

Teraz faktycznie zmodyfikujemy natywną aplikację na Androida, aby zintegrować React Native.

Pierwszy fragment kodu, który napiszemy, to właściwy kod React Native dla nowego ekranu, który zostanie zintegrowany z naszą aplikacją.

Tworzenie pliku index.js​

Najpierw utwórz pusty plik index.js w katalogu głównym twojego projektu React Native.

index.js to punkt startowy aplikacji React Native i jest zawsze wymagany. Może to być mały plik, który importuje inne pliki będące częścią twojego komponentu lub aplikacji React Native, lub może zawierać cały potrzebny kod.

Our index.js should look as follows (here the Community template file as reference):

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

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

Tworzenie pliku App.tsx​

Let's create an App.tsx file. This is a TypeScript file that can have JSX expressions. It contains the root React Native component that we will integrate into our Android application (link):

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;

Here is the Community template file as reference.

5. Integracja z kodem Androida​

Teraz musimy dodać kod natywny, aby uruchomić środowisko wykonawcze React Native i nakazać renderowanie naszych komponentów React.

Aktualizacja klasy Application​

Najpierw musimy zaktualizować klasę Application, aby poprawnie zainicjować 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();
+   }
  }
}

As usual, here the MainApplication.kt Community template file as reference.

Tworzenie ReactActivity​

Na koniec musimy utworzyć nową Activity, która rozszerza ReactActivity i będzie hostować kod React Native. Ta aktywność będzie odpowiedzialna za uruchomienie środowiska wykonawczego React Native oraz renderowanie komponentu 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());
    }
}

As usual, here the MainActivity.kt Community template file as reference.

Za każdym razem gdy tworzysz nową Activity, musisz dodać ją do pliku AndroidManifest.xml. Musisz także ustawić motyw MyReactActivity na Theme.AppCompat.Light.NoActionBar (lub dowolny motyw bez ActionBar), ponieważ w przeciwnym razie aplikacja wyświetli pasek akcji na ekranie React Native:

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>

Twoja aktywność jest teraz gotowa do uruchomienia kodu JavaScript.

6. Przeprowadź test integracji​

Ukończyłeś wszystkie podstawowe kroki integracji React Native z Twoją aplikacją. Teraz uruchomimy bundler Metro, który skompiluje kod TypeScript w pakiet. Serwer HTTP Metro udostępnia pakiet z localhost w twoim środowisku deweloperskim na symulator lub urządzenie. Umożliwia to hot reloading.

Najpierw utwórz plik metro.config.js w katalogu głównym projektu o następującej zawartości:

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

You can checkout the metro.config.js file from the Community template file as reference.

Gdy masz już plik konfiguracyjny, możesz uruchomić bundler. Uruchom następujące polecenie w katalogu głównym swojego projektu:

shell
npm start

Teraz zbuduj i uruchom aplikację Android jak zwykle.

Teraz zbuduj i uruchom swoją aplikację iOS w zwykły sposób.

Tworzenie wersji produkcyjnej w Android Studio​

Możesz także użyć Android Studio do tworzenia wersji produkcyjnych! Jest to tak proste jak tworzenie wersji produkcyjnych istniejącej natywnej aplikacji Android.

Wtyczka React Native Gradle Plugin zajmie się pakowaniem kodu JS wewnątrz twojego APK/App Bundle.

Jeśli nie używasz Android Studio, możesz utworzyć wersję produkcyjną za pomocą:

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

Co dalej?​

W tym momencie możesz kontynuować rozwijanie aplikacji w zwykły sposób. Odwołaj się do dokumentacji dotyczącej debugowania i wdrażania, aby dowiedzieć się więcej o pracy z React Native.