Przejdź do treści głównej
Wersja: 0.77

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/0.75-stable/template/package.json

Spowoduje to skopiowanie pliku package.json ze szablonu społecznościowego do twojego projektu.

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.

Dodaj node_modules/ do pliku .gitignore (tutaj domyślny z szablonu).

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.

Najpierw edytuj plik settings.gradle, dodając te linie (jak sugeruje szablon społecznościowy):

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

Następnie otwórz główny plik build.gradle i dodaj tę linię (jak sugeruje szablon społecznościowy):

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

To zapewnia dostępność wtyczki Gradle dla React Native (RNGP) w twoim projekcie. Na koniec dodaj te linie w pliku build.gradle twojej aplikacji (to inny plik build.gradle, zwykle w folderze app - możesz użyć pliku ze szablonu):

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

Na koniec otwórz plik gradle.properties aplikacji i dodaj następującą linię (tutaj plik ze szablonu):

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>

Jak zwykle, tutaj pliki AndroidManifest.xml ze szablonu do wykorzystania jako odniesienie: główny i debugowy

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.

Nasz plik index.js powinien wyglądać następująco (tutaj plik ze szablonu):

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

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

Tworzenie pliku App.tsx​

Stwórzmy plik App.tsx. To plik TypeScript zawierający wyrażenia JSX, który przechowuje główny komponent React Native do integracji z aplikacją Android (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;

Tutaj plik szablonu społecznościowego jako odniesienie

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

Jak zwykle, tutaj plik MainApplication.kt ze szablonu

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

Jak zwykle, tutaj plik MainActivity.kt ze szablonu

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

Możesz sprawdzić plik metro.config.js z szablonu społecznościowego jako odniesienie.

Gdy plik konfiguracyjny jest gotowy, możesz uruchomić bundler. Wykonaj następujące polecenie w katalogu głównym 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.