react-native-unity-view

Integrate unity3d within a React Native app. Add a react native component to show unity. Works on both iOS and Android.

Example

Preview

How to use

Install

npm install react-native-unity-view --save

react-native link react-native-unity-view

Add Unity Project

Create an unity project, Example: 'Cube'.
Create a folder named unity in react native project folder.
Move unity project folder to unity folder.

Now your project files should look like this.

.
├── android
├── ios
├── unity
│   └── <Your Unity Project>    // Example: Cube
├── node_modules
├── package.json
├── README.md

Configure Player Settings

First Open Unity Project.
Click Menu: File => Build Settings => Player Settings
Change Product Name to Name of the Xcode project, You can find it follow ios/${XcodeProjectName}.xcodeproj.

IOS Platform:

Other Settings find the Rendering part, uncheck the Auto Graphics API and select only OpenGLES2.

Add Unity Build Scripts and Export

Copy Build.cs and XCodePostBuild.cs to unity/<Your Unity Project>/Assets/Scripts/Editor/

Open your unity project in Unity Editor. Now you can export unity project with Build/Export Android or Build/Export IOS menu.

Android will export unity project to android/UnityExport.

IOS will export unity project to ios/UnityExport.

Configure Native Build

Android Build

Make alterations to the following files:

android/settings.gradle

...
include ":UnityExport"
project(":UnityExport").projectDir = file("./UnityExport")

android/build.gradle

allprojects {
    repositories {
        ...
        flatDir {
            dirs project(':UnityExport').file('libs')
        }
    }
}

android/app/build.gradle

dependencies {
    ...
    compile project(':UnityExport')
}

IOS Build

Open your react native project in XCode.
Copy File UnityConfig.xcconfig to ios/${XcodeProjectName}/.
Drag UnityConfig.xcconfig to XCode. Choose Create folder references.
Setting .xcconfig to project.

Use In React Native

Props

`onMessage`

Receive message from unity.

Please copy UnityMessageManager.cs to your unity project and rebuild first.

Example:

Send Message use C#.

UnityMessageManager.Instance.SendMessageToRN("click");

Receive Message in javascript

onMessage(event) {
    console.log('OnUnityMessage: ' + event.nativeEvent.message);    // OnUnityMessage: click
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                style={style.unity}
                onMessage={this.onMessage.bind(this)}
            />
        </View>
    );
}

Methods

`postMessage(gameObject: string, methodName: string, message: string)`

Send message to unity.

gameObject The Name of GameObject. Also can be a path string.
methodName Method name in GameObject instance.
message The message will post.

Example:

Add a message handle method in MonoBehaviour.

public class Rotate : MonoBehaviour {
    void handleMessage(string message) {
		Debug.Log("onMessage:" + message);
	}
}

Add Unity component to a GameObject.
Send message use javascript.

onToggleRotate() {
    if (this.unity) {
      // gameobject param also can be 'Cube'.
      this.unity.postMessage('GameObject/Cube', 'toggleRotate', 'message');
    }
}

render() {
    return (
        <View style={[styles.container]}>
            <UnityView
                ref={(ref) => this.unity = ref}
                style={style.unity}
            />
            <Button label="Toggle Rotate" onPress={this.onToggleRotate.bind(this)} />
        </View>
    );
}

Example Code

import React from 'react';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
import UnityView from 'react-native-unity-view';

export default class App extends React.Component<Props, State> {
    render() {
    return (
      <View style={styles.container}>
        <UnityView style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }} /> : null}
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

Enjoy!!!

seacloud9 / react-native-unity-view Goto Github PK