React Native〜0.61.4 Event Emitter导致IOS崩溃?

问题描述 投票:0回答:1

[我正在构建一个音乐应用程序,其中迷你播放器组件保存着博览会音频实例,并且它与底部选项卡导航器分离,这有两个重要原因:

1-音频实例位于该微型播放器组件中,因此导航不会重置它。

2-迷你播放器是全局的,因此在所有应用程序堆栈和选项卡导航中都可用。

我正在使用NativeEventEmitter来帮助我控制播放器的动作(例如:播放/暂停;下一个;上一个;),因为这些功能位于该微型播放器组件中,需要从标签导航器中的堆栈屏幕中调用! 。

现在在Android中它可以正常工作,但是在IOS中,它导致应用程序崩溃。

错误:

本地模块不能为空-node_modules / react-native / Libraries / EventEmitter / NativeEventEmitter.js:36:16在_handleStop中的App / Containers / Player / PlayerScreen.js:47:4

我正在这里实现的逻辑是,在安装miniPlayer组件后单击它,我将其隐藏并导航到Player Screen

播放器屏幕:

...
class PlayerScreen extends Component {
  constructor(props) {
    super(props);
    this.eventEmitter = new NativeEventEmitter();
    this._handleNext = this._handleNext.bind(this);
    this._handlePlayPause = this._handlePlayPause.bind(this);
    this._handlePrevious = this._handlePrevious.bind(this);
    this.state = {
      time: "00:00"
    };
  }

  componentDidMount() {

  }

  _handlePlayPause = () => {
    this.eventEmitter.emit("PLAYPAUSE", "");
  };

  _handleNext = () => {
    this.eventEmitter.emit("NEXTSONG", "");
  };

  _handlePrevious = () => {
    this.eventEmitter.emit("PREVIOUSSONG", "");
  };

  _handleStop = () => {
    this.eventEmitter.emit("STOPSONG", "");
  };
...
render()
....

MiniPlayer组件:

componentDidMount() {
    this.listener = DeviceEventEmitter.addListener("PLAYPAUSE", data => {
      this._handlePlayAndPause();
      console.log("New Event is registered At Listeners PLAY_PAUSE");

    });
    this.listenerN = DeviceEventEmitter.addListener("NEXTSONG", data => {
      this._handleNextSong()
      console.log("New Event is registered At Listeners NEXT_SONG ");

    });
    this.listenerP = DeviceEventEmitter.addListener("PREVIOUSSONG", data => {
     this._handlePreviousSong()
      console.log("New Event is registered At Listeners PREVIOUS_SONG");

    });

    this.listenerS = DeviceEventEmitter.addListener("STOPSONG", data => {
      this._handleStopSong();
      console.log("New Event is registered At Listeners STOPSONG");
    }) 

根据有关媒体的一些文章:

React Native不再包含节点标准库。但是,有一些独立的模块可以重新实现EventEmitter API。

[在查看NativeEventEmitter.js抽象基类时,我可以在构造函数中看到它。

const EventEmitter = require('../vendor/emitter/EventEmitter');
const Platform = require('../Utilities/Platform');
const RCTDeviceEventEmitter = require('./RCTDeviceEventEmitter');

const invariant = require('invariant');

...

class NativeEventEmitter extends EventEmitter {
  _nativeModule: ?NativeModule;

  constructor(nativeModule: ?NativeModule) {
    super(RCTDeviceEventEmitter.sharedSubscriber);
    if (Platform.OS === 'ios') {
      invariant(nativeModule, 'Native module cannot be null.'); <== This where it crashes
      this._nativeModule = nativeModule;
    }
  }

更新:

我创建了一个包含两个成分的小吃,它们复制了我想要实现的目标:

https://snack.expo.io/@git/github.com/oflarcade/customEventsExpo

在Android上运行正常/在IOS上:

enter image description here

ios node.js react-native expo react-native-ios
1个回答
0
投票

因此,任何试图在没有父母/孩子关系的两个组件之间提供交流手段的人;我只剩下这篇文章:

Article

为此用例打开的问题已关闭:

Issue

我已经尝试过该软件包(react-native-event-listeners),它确实适用于IOS和Android。

我希望这能像我一样解决您的问题:

Snack为工作示例。

© www.soinside.com 2019 - 2024. All rights reserved.