How can I place Unity WebGL in my React Native app?

问题

I have written a simple React Native app using WebGL. I used 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" />`
  );
}

But I'm getting the error below:

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)

Is there a simpler way to place Unity webGL in my React Native app?

回答1:

you must have to import React and document from react-native try this it will solve your problem and also Make sure you download the release matching with your Unity version.

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

回答2:

Is it your entire codes? or a rest of them? you must add react and some other stuffs to make that to works. I write below codes for you if you don't have it add them to your project:

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:

Simplest way:

Go to the index.html file for your react project.
Add Script tag for the Unity WebGL loader: <script src="Your File Path Here"></script>
Script for instantiating Unity(you can also use one of your components in react for this): <script> var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");</script>
A <div> tag, which has an id that is used in the instantiation function.
Do not display it until you have reached the component path that you desired with react. When you are in the path Mywebsite/myUnityProject use the ID of the <div> to select and change the display mode to visible.

I hope that helped !

来源：https://stackoverflow.com/questions/50819780/how-can-i-place-unity-webgl-in-my-react-native-app

标签

reactjs

unity3d

react-native

unity-webgl