如何在我的 React Native 应用程序中放置 Unity WebGL？答案

【问题标题】：How can I place Unity WebGL in my React Native app?如何在我的 React Native 应用程序中放置 Unity WebGL？
【发布时间】：2018-11-22 00:08:06
【问题描述】：

我使用 WebGL 编写了一个简单的 React Native 应用程序。我用https://github.com/JilvanPinheiro/reactive-native-unity-webgl

import Unity from 'react-native-unity-webgl';
...
render() {
  return (
 <Unity 
       width="500px"
       height="350px"
       onProgress={ this.onProgress }
       src="http://192.168.1.101/Build/Ultimatum.json" 
       loader="http://192.168.1.101/Build/UnityLoader.js" />`
  );
}

但我收到以下错误：

ReferenceError:  Can't find variable: document. This error is located at:
    in Unity (at App.js:9)
    in RCTView (at View.js:60)
    in View (at App.js:8)
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

有没有更简单的方法将 Unity webGL 放置在我的 React Native 应用程序中？

【问题讨论】：

在您链接的站点的文档中看到了这个：The path within your src and loader should be relative to the html file your app is running in. 您不完整示例中的... 是否包含export class App extends React.Component {？

标签： reactjs unity3d react-native unity-webgl

【解决方案1】：

你必须从 react-native 导入 React 和 document 试试这个它会解决你的问题，同时确保你下载与你的 Unity 版本匹配的版本。

import React, {Component} from 'react';
import {View,document} from 'react-native';

【讨论】：

【解决方案2】：

这是你的全部代码吗？还是其他人？您必须添加 react 和其他一些东西才能使其正常工作。如果您没有将它们添加到您的项目中，我会为您编写以下代码：

import React, {Component} from 'react';
import {
    View,
    documnet
} from 'react-native';

...

render () {
    return(
        <View>
             <Unity 
               width="500px"
               height="350px"
               onProgress={ this.onProgress }
               src="http://192.168.1.101/Build/Ultimatum.json" 
               loader="http://192.168.1.101/Build/UnityLoader.js"
             />
        </View>
    );
}

【讨论】：

【解决方案3】：

最简单的方法：

转到您的 react 项目的 index.html 文件。
为 Unity WebGL 加载器添加脚本标签：<script src="Your File Path Here"></script>
用于实例化 Unity 的脚本（您也可以使用其中一个组件对此做出反应）：<script> var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");</script>
<div> 标记，它有一个在实例化函数中使用的 id。
在到达所需的组件路径之前不要显示它。当您在路径 Mywebsite/myUnityProject 中时，使用 <div> 的 ID 选择显示模式并将其更改为可见。

希望对你有所帮助！

【讨论】：