In letzter Zeit brauchte ich eine einfache Funktion, um mit dem nativen Code zu interagieren, aber ich entschied mich, kein Paket zu erstellen, da dies nicht sehr nützlich wäre. Ich habe die Java-Dateien genau so erstellt, als ob sie von einem Plugin stammen, und sie in MainApplication registriert.

Ich benutze Typoskript, also kämpfe ich jetzt mit der Interaktion von rn zu Java. Ich habe es mit einer js-Datei wie folgt versucht:

import NativeModules from 'react-native';
const AndroidService = NativeModules;
export default { AndroidService }

Aber dann muss ich Typen definieren (Nachricht von vs Code):

Property 'play' does not exist on type '{ AndroidService: typeof import("/home/karol/Git/TailosiveHub-react/node_modules/@types/react-native/index"); }'.

Ich habe versucht, eine index.d.ts - Datei im Stammverzeichnis des Projekts zu erstellen, aber das funktioniert nicht.

Wie definiere ich Typen für ein natives Modul in Typoskript?

Hauptanwendung:

@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new AndroidServicePackage());
    // packages.add(new MainReactPackage());
    return packages;
}

AndroidServicePackage:

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  return Arrays.<NativeModule>asList(new AndroidServiceModule(reactContext));
}

AndroidServiceModule:

@Override
public String getName() {
    return "AndroidService";
}

Methode:

@ReactMethod
public void play(String streamingURL/*, ReadableMap options*/) {
  doSomething();
}
1
Karol Wasowski 8 Feb. 2020 im 16:55

3 Antworten

Beste Antwort

Ich habe es behoben, indem ich meine Importe in der Plugin-Datei korrigiert habe. Es sieht jetzt so aus:

import { NativeModules } from 'react-native';
const AndroidService = NativeModules.AndroidService;
export default AndroidService;
0
Karol Wasowski 10 Feb. 2020 im 18:48

Der NativeModules-Import enthält die nativen Module, sodass Sie lediglich das AndroidService-Modul als Eigenschaft extrahieren müssen.

import NativeModules from 'react-native';
const { AndroidService } = NativeModules
export default { AndroidService }

Alternativ können Sie es einfach so exportieren:

import NativeModules from 'react-native';
exports.default = NativeModules.AndroidService;

Dies sollte Ihnen das gewünschte Ergebnis liefern, vorausgesetzt, Sie haben das entsprechende native Modul namens AndroidService in einem Paket für React Native hinzugefügt.

Entnommen aus Reagieren Sie auf die Native-Dokumentation zu Native Modules

1
Steven Lam 9 Feb. 2020 im 00:17

Sie müssen AndroidService wie folgt in Klammern um Ihre Zuordnung setzen (das nennt man Destrukturierung):

import { NativeModules } from 'react-native'; 
export const { AndroidService } = NativeModules

Dann können Sie es in einer anderen Datei wie folgt verwenden:

import { AndroidService } from 'path/to/exporting/file';

...

AndroidService.play("YOUR_URL"); 
0
Yanick Bélanger 10 Feb. 2020 im 18:52