- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试图让我的浏览器将一些 DOM 事件发送到 React VR 组件中。
我得到的最接近的是这段使用“ native 模块”的代码。
(客户端.js)
const windowEventsModule = new WindowEventsModule();
function init(bundle, parent, options) {
const vr = new VRInstance(bundle, 'WelcomeToVR', parent, {
...options,
nativeModules: [windowEventsModule]
});
windowEventsModule.init(vr.rootView.context);
vr.start();
return vr;
}
window.ReactVR = {init};
(WindowEventsModule.js)
export default class WindowEventsModule extends Module {
constructor() {
super('WindowEventsModule');
this.listeners = {};
window.onmousewheel = event => {
this._emit('onmousewheel', event);
};
}
init(rnctx) {
this._rnctx = rnctx;
}
_emit(name, ob) {
if (!this._rnctx) {
return;
}
Object.keys(this.listeners).forEach(key => {
this._rnctx.invokeCallback(this.listeners[key], [ob]);
});
}
onMouseWheel(listener) {
const key = String(Math.random());
this.listeners[key] = listener;
return () => {
delete this.listeners[key];
};
}
}
所以我的组件现在可以调用 WindowEvents.onMouseWheel(function() {})
,并从 DOM 世界获得回调。
不幸的是,这只能工作一次。 RN 在调用后显然会使我的回调无效。
我还调查了 this._rnctx.callFunction()
,它可以在称为“可调用模块”的东西上调用任意函数。我不知道如何从那里获取我的组件。
有什么我想念的吗?从原生世界向 ReactVR 后台 worker 提供任意消息的模式是什么?
最佳答案
我想通了......有点。
诀窍是创建我自己的“BatchedBridge”,然后我可以使用上下文中的 callFunction()
访问它。
(index.vr.js)
import React from 'react';
import {AppRegistry, asset, Pano, View} from 'react-vr';
import BatchedBridge from 'react-native/Libraries/BatchedBridge/BatchedBridge';
import lodash from 'lodash';
class BrowserBridge {
constructor() {
this._subscribers = {};
}
subscribe(handler) {
const key = String(Math.random());
this._subscribers[key] = handler;
return () => {
delete this._subscribers[key];
};
}
notifyEvent(name, event) {
lodash.forEach(this._subscribers, handler => {
handler(name, event);
});
}
}
const browserBridge = new BrowserBridge();
BatchedBridge.registerCallableModule(BrowserBridge.name, browserBridge);
export default class WelcomeToVR extends React.Component {
constructor(props) {
super(props);
this.onBrowserEvent = this.onBrowserEvent.bind(this);
}
componentWillMount() {
this.unsubscribe = browserBridge.subscribe(this.onBrowserEvent);
}
onBrowserEvent(name, event) {
// Do the thing here
}
componentWillUnmount() {
if (this.unsubscribe) {
this.unsubscribe();
delete this.unsubscribe;
}
}
render() {
//...
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
(WindowEventsModule.js)
import {Module} from 'react-vr-web';
import lodash from 'lodash';
const eventToOb = (event) => {
const eventOb = {};
for (let key in event) {
const val = event[key];
if (!(lodash.isFunction(val) || lodash.isObject(val))) {
eventOb[key] = val;
}
}
return eventOb;
};
export default class WindowEventsModule extends Module {
constructor() {
super('WindowEventsModule');
this._bridgeName = 'BrowserBridge';
window.onmousewheel = event => {
this._emit('onmousewheel', event);
};
}
init(rnctx) {
this._rnctx = rnctx;
}
_emit(name, event) {
if (!this._rnctx) {
return;
}
const eventOb = eventToOb(event);
this._rnctx.callFunction(this._bridgeName, 'notifyEvent', [name, eventOb]);
}
}
这感觉很老套,因为 BatchedBridge
似乎从未打算向消费者公开。
但在没有更好的选择之前,我想我会选择这个。
关于javascript - React VR 组件和 native 模块代码之间的持久桥梁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44394508/
我想从 java 运行 r 脚本。我有以下代码,但给出 null: try { RCaller caller = new RCaller(); caller.setRscriptExe
首先,我将介绍我的网络应用程序正在做什么:该 Web 应用程序的主题是具有特定类型信息的不同分布式数据库和分布式数据系统。到目前为止,我使用 PHP、JavaScript 和 JQuery-ui 进行
我想知道是否可以从 Java 代码中获取 Javascript 变量值。换句话说,我在 WebView 中有 JS 代码,我需要能够从 WebView 的 JS 代码中获取变量。 最佳答案 是的,可以
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this qu
我是一名优秀的程序员,十分优秀!