Question

我正在从事一个VR项目，该项目有2个用户角色，一个负责人（负责设置和配置VR会话）和一个客户端（负责连接到此会话）。我正在使用本机模块执行DOM覆盖，其中为领导者显示了与会话配置相关的几个按钮。我想知道是否可以直接从本机模块调用React360代码中的函数（即不作为事件源于本机模块的回调）？这可能是一个完整的反模式，我似乎看不到这样做的方法...

Answer 1

我实际上是通过以下方式工作的：

在client.js中，我将上下文传递给DOM覆盖本机模块：

  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    cursorVisibility: "visible",
    nativeModules: [
      // Create an instance of the DOM overlay module and pass the context
      ctx => new DashboardModule(ctx, domDashboardContainer)
    ],
    ...options,
  });

在仪表板本机模块中：

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;
};

....

    constructor(ctx, overlayContainer) {
        super('DashboardModule');     
...
        this._rnctx = ctx;

        this._bridgeName = 'BrowserBridge';
    }

   onButtonClick() {
       ....
       this._emit('nativeButtonClicked', event);
   }

    _emit(name, event) {
        if (!this._rnctx) {
            return;
        }
        const eventOb = eventToOb(event);
        this._rnctx.callFunction(this._bridgeName, 'notifyEvent', [name, eventOb]);
    }

...

和我的index.js

...
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);

....

  constructor(props) {
    super(props);
    this.onBrowserEvent = this.onBrowserEvent.bind(this);
    ...
  }

  componentWillMount() {
    this.unsubscribe = browserBridge.subscribe(this.onBrowserEvent);
  }

  onBrowserEvent(name, event) {
      // Do action on event here
  }

  componentWillUnmount() {
      if (this.unsubscribe) {
          this.unsubscribe();
          delete this.unsubscribe;
      }
  }

如果有更好的方法，请告诉我。

是否可以从本机模块调用react-360方法？

1 个答案: