在 react-native 中从 TypeScript 调用本机函数答案

【问题标题】：Calling native function from TypeScript in react-native在 react-native 中从 TypeScript 调用本机函数
【发布时间】：2020-05-24 10:00:39
【问题描述】：

最近我需要一个简单的函数来与本机代码交互，但我决定不构建包，因为它不是很有用。我创建了 Java 文件，就好像它们来自插件一样，并在 MainApplication 中注册了它。

我正在使用 typescript，所以现在我正在努力处理 rn 到 java 的交互。我尝试了一个js文件如下：

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

但是我必须定义类型（来自 vs 代码的消息）：

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

我尝试在项目的根目录中创建一个index.d.ts 文件，但这不起作用。

如何在 typescript 中为原生模块定义类型？

主应用程序：

@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";
}

方法：

@ReactMethod
public void play(String streamingURL/*, ReadableMap options*/) {
  doSomething();
}

【问题讨论】：

标签： android typescript react-native react-native-android

【解决方案1】：

NativeModules 导入包含内部的原生模块，因此您只需将 AndroidService 模块提取为属性即可。

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

或者，您可以像这样简单地导出它：

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

这应该会给你想要的结果，前提是你在给 React Native 的包中添加了名为 AndroidService 的相应原生模块。

取自React Native's documentation on Native Modules

【讨论】：

这不起作用：AndroidService.default.play(url) is not a function (is undefined)。我在帖子中添加了更多详细信息。

【解决方案2】：

您必须像这样在分配给AndroidService 的周围添加括号（这称为解构）：

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

然后在另一个文件中你可以像这样使用它：

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

...

AndroidService.play("YOUR_URL");

【讨论】：

在我导入模块 vs 代码的文件中告诉我Property 'AndroidService' does not exist on type 'typeof import("/home/karol/Git/TailosiveHub-react/node_modules/@types/react-native/index")' 如果我运行应用程序，我会得到：TypeError: undefined is not an object (evaluating '_AndroidService.AndroidService.play')

【解决方案3】：

我通过在插件 ts 文件中修复我的导入来修复它。现在看起来像这样：

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

【讨论】：