如何将 Unity WebGL 放置在我的 React Native 应用程序中?

Question

我用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应用程序中？

Answer 1

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

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

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

Answer 3

最简单的方法：

1. 转到 index.html 文件为您的 react 项目。

2. 为 Unity WebGL 加载器添加脚本标记：<script src="Your File Path Here"></script>

3. 用于实例化 Unity 的脚本(您也可以在 react 中使用其中一个组件(：<script> var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");</script>

4. 一个<div>标记，它具有在实例化函数中使用的 id。

5. 在到达所需的组件路径之前，不要显示它 反应.当您在路径中时，使用<div>的 ID 选择显示模式并将其更改为可见。

我希望这有帮助！