React / AFrame 对象分配错误答案

【问题标题】：React / AFrame object assign errorReact / AFrame 对象分配错误
【发布时间】：2017-02-13 03:47:59
【问题描述】：

我试图在 react-native 中连接 Aframe，但在模拟器中启动时出现此错误：

One of the sources for assign has an enumerable key on the prototype chain. Are you trying to assign a prototype property? We don't allow it, as this is an edge case that we do not support. This error is a performance optimization and no spec compliant.

我正在使用 Aframe 0.5.0 和 React-Native 0.41.2

错误是从 polyfills.js 的第 56 行抛出的，与 aframe-master.js:55729 的这一部分有关。

Object.assign( THREE.MTLLoader.prototype, THREE.EventDispatcher.prototype, {

有没有办法解决这个问题？我是否需要修改 aframe 以使用不同的分配，或者有什么方法可以解决这个问题？

我正在运行一个非常简单的 hello world，只是尝试加载依赖项失败了。在其他相关问题中，人们说他们已经通过使用 lodash.assign 或 Object.defineProperties 解决了这个问题——这是一个可行的解决方案吗？在此期间，我可以恢复到旧版本的 react-native，但理想情况下我希望将最新版本与 a-frame 一起使用。

https://github.com/facebook/react-native/issues/5507

https://github.com/facebook/react-native/issues/3634

** 更新 ** 好的，我尝试回滚，安装 react-native 0.36.1 并将我在 WebView 中加载的站点切换为使用 aframe 0.3.2。

我在 React 本机应用程序中的代码是这样的：

好的，我尝试回滚，使用 rninit 安装 react-native 0.36.1，并将我在 WebView 中加载的站点切换为使用 aframe 0.3.2。

我在 React 本机应用程序中的代码是这样的：

import React, { Component } from 'react';
 // import ReactDOM from 'react-dom';
 import {
   AppRegistry,
   WebView
 } from 'react-native';

 export default class test4 extends Component {
   render() {
     return (
       <WebView source={{uri: 'http://[theurl]/test.html'}}/>
     );
   }
 }


 AppRegistry.registerComponent('test4', () => test4);

aframe 应用是这样的：

<!DOCTYPE html>
<html>
    <head>
        <title>A-Frame walkthrough (final)</title>
        <script src="/aframe.js"></script>

    </head>
<body>
  <a-scene>
    <a-assets>
      <img id="circle" src="circle.png"/>
    </a-assets>


      <a-sky src="Ephesus4_1.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>

</html>

当我通过从 chrome://inspect#devices 检查 web 视图打开调试器时，我得到以下输出：

Mozilla/5.0 (Linux; Android 6.0; Android SDK built for x86_64 Build/MASTER; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119 Mobile Safari/537.36
aframe.js:54681 Recalculating device params.
aframe.js:54718 User agent: Mozilla/5.0 (Linux; Android 6.0; Android SDK built for x86_64 Build/MASTER; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119 Mobile Safari/537.36
aframe.js:54719 Pixel width: 2562
aframe.js:54720 Pixel height: 1442
aframe.js:54762 No DPDB device match.
aframe.js:54683 New device parameters:
aframe.js:54684 null
aframe.js:54692 Failed to recalculate device parameters.Dpdb.recalculateDeviceParams_ @ aframe.js:54692
aframe.js:54654 Fetching DPDB...
aframe.js:53106 Using fallback Android device measurements.
aframe.js:56388 Failed to load viewer profile: TypeError: Cannot read property 'getItem' of null
    at Emitter.ViewerSelector (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:56386:36)
    at VRDisplay.CardboardVRDisplay (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:52607:26)
    at WebVRPolyfill.populateDevices (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:56694:17)
    at WebVRPolyfill.getVRDisplays (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:56743:8)
    at new THREE.VRControls (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:66848:13)
    at Object.119.../lib/three (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:66227:16)
    at s (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:1:620)
    at http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:1:671
    at Object.122../bind (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:66358:25)
    at s (http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/aframe.js:1:620)ViewerSelector @ aframe.js:56388
aframe.js:53096 Uncaught TypeError: Cannot read property 'distortionCoefficients' of undefined
aframe.js:54662 Successfully loaded online DPDB.
aframe.js:54681 Recalculating device params.
aframe.js:54718 User agent: Mozilla/5.0 (Linux; Android 6.0; Android SDK built for x86_64 Build/MASTER; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/44.0.2403.119 Mobile Safari/537.36
aframe.js:54719 Pixel width: 2562
aframe.js:54720 Pixel height: 1442
aframe.js:54762 No DPDB device match.
aframe.js:54683 New device parameters:
aframe.js:54684 null
aframe.js:54692 Failed to recalculate device parameters.Dpdb.recalculateDeviceParams_ @ aframe.js:54692
http://ec2-52-62-186-186.ap-southeast-2.compute.amazonaws.com:8080/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

任何建议将不胜感激！

我也在 android 模拟器本身中得到了这个：

com.facebook.react.common.JavascriptException:{"stack":"错误：无法在 'WorkerGlobalScope' 上执行 'importScripts'：http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false' 处的脚本无法加载。\n 在 executeApplicationScript (@987654324 @)\n 在消息时 (http://localhost:8081/debuggerWorker.js:38.5)"}

即使我切换到在 web 视图中加载的非框架网站，我也会遇到同样的错误。

【问题讨论】：

嗨 Toby，你能发布你正在使用的 reactjs 和 aframe 的版本吗？
是的 Aframe 0.5.0 和 React-native 0.41.2，已添加到问题中
我成功的部署使用了 aframe 0.3.2 和 React-native 0.36.1。我建议你降级进行测试。同样根据您的研究，这个问题似乎更多地与 react-native 端相关。您是否尝试过在您的应用中加载原生 webview 而不是 react ？
您好托尼，很好的故障排除。您是否在模拟器上测试过本机 webview？在真机上怎么样？
尚未在真实设备上进行测试，今天将尝试，但我使用的是本机 WebView - 我已从 react 本机应用程序本身中删除了对 aframe 的所有引用。如果您有时间，是否愿意组织一次聊天并就您的解决方案如何发挥作用进行思考？

标签： reactjs react-native aframe

【解决方案1】：

经过一番折腾，我发现我的很多问题都是由于尝试在模拟器中进行测试所致。

在设备上运行时，我能够让应用程序运行最新版本的 a-frame 并使用最新版本的 react-native，但只能通过设置 react-native 来从源 java 重新编译 android 项目，从当前 master 拉取。

我还必须在 Android.Manifest 中启用硬件加速。

感谢 Chris Chen 的协助

【讨论】：