Was fällt Ihnen als Erstes ein, wenn es um React Native geht? „ Es geht darum, eine einzige Codebasis für IOS und Android gleichzeitig zu schreiben “, richtig? Ja, aber manchmal können wir einige Funktionen in einer React Native-App nicht ohne die Unterstützung des Native Code erreichen. Wir nennen das „ Native Module “. Aber was ist, wenn wir einen Teil, eine Ansicht oder einen Benutzerfluss mit React Native innerhalb einer Native-Anwendung schreiben möchten, die mit Android oder Swift geschrieben wurde? Sie fragen sich vielleicht: Ist das möglich? Ja, das ist möglich. Darüber wollen wir in diesem Artikel sprechen.

Anwendungsfälle

Möglicherweise verfügen Sie bereits über eine native Anwendung, die in Java oder Swift oder einer anderen Muttersprache wie Kotlin oder Objective C geschrieben ist. Jetzt haben Sie die App-Entwicklung bereits abgeschlossen und eine Version in den App Stores veröffentlicht. Es ist jedoch eine neue Anforderung des Kunden aufgetaucht, eine brandneue Funktion zu implementieren, die keine Leistung auf nativer Ebene erfordert (z. B. Benutzerregistrierung). Natürlich können Sie dies mit dem nativen Ansatz tun. Der einzige Nachteil besteht darin, dass Sie die gleiche Codebasis sowohl in Android als auch in iOS wiederholen müssen. Ohne dies zu tun, können wir mit React Native eine einzige Codebasis schreiben und in unsere bestehende Native-Anwendung integrieren. Um dies zu erreichen, sind nur wenige Schritte erforderlich. Die konkreten Schritte unterscheiden sich je nachdem, auf welche Plattform Sie abzielen. In diesem Artikel konzentrieren wir uns auf Android mit Java.

Also, ohne weiter zu reden, lasst uns loslegen.

Initialisieren Sie die React Native-App

npm init -y

yarn add react-native react

Jetzt können Sie einen Android-Unterordner im selben Verzeichnis erstellen, in dem sich package.json befindet. Und verschieben Sie die vorhandene Android-App in diesen Ordner.

Paket.JSON aktualisieren

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

touch index.js
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

const HelloWorld = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.hello}>Hello, World</Text>
    </View>
  );
};
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

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

Gradle konfigurieren

Ihre Abhängigkeiten und Projekteinstellungen in React Native werden mit dem React Native Gradle Plugin konfiguriert. Beginnen wir damit, Ihre Datei „settings.gradle“ zu bearbeiten und die folgende Zeile hinzuzufügen

includeBuild('../node_modules/react-native-gradle-plugin')

classpath("com.facebook.react:react-native-gradle-plugin")

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

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

repositories {
    mavenCentral()
}

dependencies {
    // Other dependencies here
+   implementation "com.facebook.react:react-android"
+   implementation "com.facebook.react:hermes-android"
}

Fügen Sie den folgenden Eintrag hinzusettings.gradle

apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Stellen Sie als Nächstes sicher, dass Sie in Ihrem AndroidManifest über die Internetberechtigung verfügen

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

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

Klartext-Traffic (API-Level 28+)

Ab Android 9 (API-Level 28) ist der Klartextverkehr standardmäßig deaktiviert; Dadurch wird verhindert, dass Ihre Anwendung eine Verbindung zum Metro-Bundler herstellt . Die folgenden Änderungen ermöglichen Klartextverkehr in Debug-Builds.

Wenden Sie die Option „usesCleartextTraffic“ auf Ihre Debug-AndroidManifest.xml an

<!-- ... -->
<application
  android:usesCleartextTraffic="true" tools:targetApi="28" >
  <!-- ... -->
</application>
<!-- ... -->

Fügen Sie den folgenden Code zur In-Methode Ihrer Aktivität hinzu onCreate().

private final int OVERLAY_PERMISSION_REQ_CODE = 1;  // Choose any value

...

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                                   Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
    }
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted
            }
        }
    }
    mReactInstanceManager.onActivityResult( this, requestCode, resultCode, data );
}

Kommen wir nun zur Magie

Die Magie: ReactRootView

Fügen wir nativen Code hinzu, um die React Native-Laufzeit zu starten und sie anzuweisen, unsere JS-Komponente zu rendern. Dazu erstellen wir eine Aktivität, die eine ReactRootView erstellt, darin eine React-Anwendung startet und sie als Hauptinhaltsansicht festlegt. Wenn Sie auf eine Android-Version <5 abzielen, verwenden Sie die AppCompatActivity-Klasse aus dem Paket com.android.support:appcompat anstelle von Activity.

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SoLoader.init(this, false);

        mReactRootView = new ReactRootView(this);
        List<ReactPackage> packages = new PackageList(getApplication()).getPackages();
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // packages.add(new MyReactNativePackage());
        // Remember to include them in `settings.gradle` and `app/build.gradle` too.

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackages(packages)
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // The string here (e.g. "MyReactNativeApp") has to match
        // the string in AppRegistry.registerComponent() in index.js
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

Legen Sie das Thema von MyReactActivity auf Theme.AppCompat.Light.NoActionBar fest, da einige React Native-UI-Komponenten auf diesem Thema basieren.

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

@Override
protected void onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}

@Override
protected void onResume() {
    super.onResume();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy(this);
    }
    if (mReactRootView != null) {
        mReactRootView.unmountReactApplication();
    }
}

@Override
 public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}

Starten Sie den Entwicklungsserver.

yarn start