React本机- NativeEventEmitter - JSModule不听事件

Question

我想要创建一个RN包(不久将在npm上发布)，它有一个本地的一面。正因为如此，我认为把它放在我的node_modules dir中是个好主意，所以我可以在开发过程中进行测试，目前只有android。

• 我在文档后面创建模块，用创建-反应-本机库创建，它用类型记录创建
• 编写Java模块和包
• 编写了我模块的JS端

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

我需要在事件的基础上做一些抽象，这样我就可以公开一个友好的api。

我在模块中所做的每一次更改，都会运行yarn run bob build (来自创建-反应-本机库)，然后在测试项目上运行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

最后，iam也使用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组件)中工作。

谁想近距离看看这是回购

是的，这都是大家

Answer 1

使用的react-native不是相同的路径，不能接收事件。

这是因为custom_ library使用react-native of custom_library/node_modules/react-native而不是your_app of your_app/node_modules/react-native。

将import xxx from 'react-native'修改为custom_ library中的import xxx from 'your_app/node_modules/react-native'以正常接收事件。

使用发布的custom_ library不会导致此问题。预期:它不会安装在devDependencies中定义的react-native。

我还想知道为什么不同路径的react-native不能接收事件。