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

【问题标题】：Is it possible to call a react-360 method from a native Module?是否可以从本机模块调用 react-360 方法？
【发布时间】：2018-08-08 11:35:27
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-native react-360

【解决方案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;
      }
  }

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

【讨论】：