时间戳

首页 > 解决方案 > 在 react-native 中从 TypeScript 调用本机函数

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

问题描述

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

我正在使用打字稿，所以现在我正在努力处理 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文件，但这不起作用。

如何在打字稿中定义本机模块的类型？

主要应用：

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

安卓服务包：

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

安卓服务模块：

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

方法：

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

标签： androidtypescriptreact-nativereact-native-android

解决方案

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 关于 Native Modules 的文档

推荐阅读