[我正在构建一个音乐应用程序,其中迷你播放器组件保存着博览会音频实例,并且它与底部选项卡导航器分离,这有两个重要原因:
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上:
因此,任何试图在没有父母/孩子关系的两个组件之间提供交流手段的人;我只剩下这篇文章:
为此用例打开的问题已关闭:
我已经尝试过该软件包(react-native-event-listeners),它确实适用于IOS和Android。
我希望这能像我一样解决您的问题:
Snack为工作示例。