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

Posted 2023-03-13

【中文标题】在 react-native 中从 TypeScript 调用本机函数

【英文标题】：Calling native function from TypeScript in react-native

【发布时间】：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();

【参考方案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;