如何在 React Native 應用程序中放置 Unity WebGL？

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)

有沒有更簡單的方法可以在我的 React Native 應用程序中放置 Unity webGL？

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. 轉到您的 React 項目的 index.html 文件。

2. 為 Unity WebGL 加載器添加腳本標簽： <script src="Your File Path Here"></script>

3. 用於實例化 Unity 的腳本（您也可以使用其中一個組件對此做出反應）： <script> var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");</script>

4. 一個<div>標簽，它有一個在實例化函數中使用的 id。

5. 在使用 react 到達所需的組件路徑之前，不要顯示它。 當您在路徑 Mywebsite/myUnityProject 中時，使用<div>的 ID 選擇並將顯示模式更改為可見。

我希望有幫助！