React Native - NativeEventEmitter - JSModule 不监听事件答案

【问题标题】：React Native - NativeEventEmitter - JSModule not listen to eventsReact Native - NativeEventEmitter - JSModule 不监听事件
【发布时间】：2022-07-07 15:29:17
【问题描述】：

我想创建一个具有原生端的 RN 包（即将在 npm 上发布）。因此，我认为将它放在我的 node_modules 目录中可能是个好主意，这样我就可以在开发时进行测试，目前只有 android。

我按照文档创建模块，使用create-react-native-library，它使用打字稿创建
编写了 Java 模块和包
编写了我的模块的 JS 端

唯一不起作用的是在我的模块 js 端从本机端获取事件。但是，如果我将事件 NativeEventEmitter 直接放在我的 App.js（RN 组件）上，它就像一个魅力。

我需要在事件之上做一些抽象，所以我可以公开一个友好的 api。

我在模块中所做的每一项更改，我都会运行 yarn run bob build（来自 create-react-native-library），然后在我的测试项目中运行 yarn run android

这是我的包目录结构

.
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── android
│   ├── build
│   │   ├── generated
│   │   ├── intermediates
│   │   ├── outputs
│   │   └── tmp
│   ├── build.gradle
│   ├── gradle
│   │   └── wrapper
│   ├── gradlew
│   ├── gradlew.bat
│   ├── local.properties
│   └── src
│       └── main
├── babel.config.js
├── ios
│   ├── GpsState.h
│   ├── GpsState.m
│   └── GpsState.xcodeproj
│       ├── project.pbxproj
│       └── project.xcworkspace
├── lib // that is the build destination dir
│   ├── commonjs
│   │   ├── index.js
│   │   ├── index.js.map
│   │   ├── types.js
│   │   └── types.js.map
│   ├── module
│   │   ├── index.js
│   │   ├── index.js.map
│   │   ├── types.js
│   │   └── types.js.map
│   └── typescript
│       ├── __tests__
│       ├── index.d.ts
│       └── types.d.ts
├── package-lock.json
├── package.json
├── react-native-gps-state.podspec
├── scripts
│   └── bootstrap.js
├── src
│   ├── __tests__
│   │   └── index.test.tsx
│   ├── index.tsx
│   └── types.ts
├── tsconfig.build.json
├── tsconfig.json
└── yarn.lock

我的模块package.json 仅相关部分

{
  "main": "lib/commonjs/index",
  "module": "lib/module/index",
  "types": "lib/typescript/index.d.ts",
  "react-native": "src/index",
  "source": "src/index",
  ....
  "scripts": {
    "test": "jest",
    "typescript": "tsc --noEmit",
    "lint": "eslint \"**/*.{js,ts,tsx}\"",
    "prepare": "bob build",
    "release": "release-it",
    "example": "yarn --cwd example",
    "pods": "cd example && pod-install --quiet",
    "bootstrap": "yarn example && yarn && yarn pods"
  },
}

我的 index.tsx（我的包的 js 部分）

import { NativeModules, NativeEventEmitter } from 'react-native';

const emitter = new NativeEventEmitter(NativeModules.GpsState);
emitter.addListener('OnStatusChange', (response: any) => {
    // never reach here, seems theres no listeners attached
    console.log('jsmodule -> OnStatusChange -> received....', response);
});

const GPSState = {
 foo: ()=>NativeModules.GPSState.bar() //those call to native side are working well by the way
 debugEmitter: ()=>NativeModules.GPSState.debugEmitter()
}

export default GPSState

最后，我也使用MessageQueue 来保证事件正在被调度，并且它们是

 LOG  GPSState debugEmitter js -> native
 LOG  {"args": [], "method": "debugEmitter", "module": "GPSState", "type": 1}
 LOG  ----------------------------------------------------------------------------------------------------------------------------------------------
 LOG  RCTDeviceEventEmitter emit native -> js
 LOG  {"args": ["OnStatusChange", {"status": 99}], "method": "emit", "module": "RCTDeviceEventEmitter", "type": 0}
 LOG  ----------------------------------------------------------------------------------------------------------------------------------------------

最后一点，MessageQueue.spy 也不适用于我的 js 包，只能在我的 App.js（RN 组件）中使用

对于想要近距离观察的人this is the repo

是的，就是这样

【问题讨论】：

标签： android react-native react-native-native-module

【解决方案1】：

你解决了这个问题吗？

【讨论】：

Mr Good，请不要添加 Me too 作为答案。它实际上并没有提供问题的答案。如果你有一个不同但相关的问题，那么ask它（如果它有助于提供上下文，请参考这个问题）。如果您对这个特定问题感兴趣，您可以upvote 它，留下comment，或者在您有足够的reputation 时开始bounty。