[JAVA] Verwenden der Native UI-Komponente mit React Native (Android-Version)

Ich wollte eine Komponente eines Native SDK eines Drittanbieters mit React Native verwenden, also habe ich nachgeschlagen. Selbst wenn Sie Englisch lesen können, ist die Formel schwer zu verstehen, da sie nicht ausreichend erklärt oder überflüssig ist. Ich bin neu in Android Java, also keine Angst. Zum Festlegen von Eigenschaften und zum Verwenden anderer APIs sind verschiedene Einstellungen erforderlich. Klicken Sie hier für iOS.

Offizielle Dokumentation

https://facebook.github.io/react-native/docs/native-components-android.html

Der einfachste Code

1. Erstellen Sie eine Manager-Klasse, die die Name and View-Instanz der nativen Komponente zurückgibt.
2. Erstellen Sie ein Paket, das Manager-Klassen (und andere Java-Module) organisiert.
3. Registrieren Sie das Paket in MainApplication.java.
4. Geben Sie den in der Manager-Klasse angegebenen Namen an und rufen Sie ihn über JavaScript auf.

ExampleManager.java

package com.example;

import android.widget.TextView;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

public class ExampleManager extends SimpleViewManager<TextView> {
    public static final String REACT_CLASS = "Example";

    // Component name that will be called from JavaScript
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    // Return the view component instantiated with Activity context
    @Override
    public TextView createViewInstance(ThemedReactContext reactContext) {
        TextView mTextView = new TextView(reactContext.getCurrentActivity());
        return mTextView;
    }
}

ExamplePackage.java

package com.example;

import java.util.Arrays;
import java.util.List;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

public class ExamplePackage implements ReactPackage {
    // Expose Java components to JavaScript
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
      return Arrays.<ViewManager>asList(
          new ExampleManager()
      );
    }
}

MainApplication.java

public class MainApplication extends Application implements ReactApplication {

    ...

    // Register the new package
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ExamplePackage() // New
      );
    }

    ...

}

App.js

import React from 'react';
import { requireNativeComponent } from 'react-native';

const Example = requireNativeComponent('Example', null);

export default class App extends React.Component {
  render() {
    return (
      <Example />
    );
  }
});