[JAVA] Utilisation du composant d'interface utilisateur natif avec React Native (version Android)

Je voulais utiliser un composant d'un SDK natif tiers avec React Native, alors je l'ai recherché. Même si vous savez lire l'anglais, la formule est difficile à comprendre car insuffisamment expliquée ou superflue. Je suis nouveau sur Android Java, alors n'ayez pas peur. Divers paramètres sont nécessaires pour définir les propriétés et utiliser d'autres API. Cliquez ici pour iOS.

Documentation officielle

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

Le code le plus simple

1. Créez une classe Manager qui renvoie l'instance Name and View du composant natif.
2. Créez un package qui organise les classes Manager (et d'autres modules Java).
3. Enregistrez le package dans MainApplication.java.
4. Spécifiez le nom donné dans la classe Manager et appelez-le depuis JavaScript.

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