如何在反应原生中桥接SceneKit？

Question

I start learning react native component creation. I have a little SceneKit project which show a single plan in a 3d view (I started from this tutorial ).

My goal is to bridge this view to get control over the 3D native camera with Javascript.

I don't know where to start. All resources on the web about creating a component is far away my scope, use external lib or are not detailed enough for a newbie like me.

My scenekit project has tree files:

• a main.storyboard (but is is compabible with a react native component ?) with a single SceneKit view
• a ControllerView
• and an AppDelegate

App Delegate:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    return true
  }
}

View Controller

import UIKit
import SceneKit

class ViewController: UIViewController {

// UI
@IBOutlet weak
var sceneView: SCNView!

    // MARK: Lifecycle
    override func viewDidLoad() {
        super.viewDidLoad()
        sceneSetup()
    }

func sceneSetup() {
    let scene = SCNScene()

    let lightNode = SCNNode()
    lightNode.light = SCNLight()
    lightNode.light!.type = SCNLightTypeAmbient
    lightNode.light!.color = UIColor(white: 0.5, alpha: 1)
    scene.rootNode.addChildNode(lightNode)

    let plan = SCNPlane(width: 20, height: 40)
    plan.firstMaterial!.diffuse.contents = UIColor.whiteColor()
    let planNode = SCNNode(geometry: plan)
    planNode.transform = SCNMatrix4MakeRotation(-90, 1, 0, 0)
    scene.rootNode.addChildNode(planNode)

    let cameraNode = SCNNode()
    cameraNode.camera = SCNCamera()
    cameraNode.position = SCNVector3(0, 0, 50)
    scene.rootNode.addChildNode(cameraNode)

    sceneView.scene = scene
    sceneView.allowsCameraControl = true
}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
}

// MARK: IBActions
@IBAction func segmentValueChanged(sender: UISegmentedControl) {

}

// MARK: Style
override func preferredStatusBarStyle() - > UIStatusBarStyle {
    return UIStatusBarStyle.LightContent
}

// MARK: Transition
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
    sceneView.stop(nil)
    sceneView.play(nil)
}

}

First of all. Is this bridgable to RN?

Answer 1

This is a really old question but being doing this myself recently and was able to get SceneKit running ok as a subview of a UIView, making use of React Native doc's iOS 'Native UI Components' tutorial as the basis for this approach...Hope it helps someone.

Manager file

#import <React/RCTViewManager.h>

@interface RCTDeviceManager : RCTViewManager
@end

@implementation RCTDeviceManager

RCT_EXPORT_MODULE()

DeviceView *view;

- (UIView *)view
{
  view = [[DeviceView alloc] init];
  return view;
}

@end

UIView file

import SceneKit
import UIKit

@objc(DeviceView)
class DeviceView: UIView {

override init(frame: CGRect) {

super.init(frame: frame)

  // create a new scene
  let scene = SCNScene(named: "art.scnassets/devices.scn")!

  // add cameras, lighting etc

  // SCNView & subview
  let scnView = SCNView(frame: CGRect(x: 0, y: 0, width: 1024, height: 768))
  self.addSubview(scnView)
  scnView.scene = scene
 }

}