如何在本机反应中桥接 SceneKit？答案

【问题标题】：How to bridge SceneKit in react native?如何在本机反应中桥接 SceneKit？
【发布时间】：2015-12-15 15:40:57
【问题描述】：

我开始学习 react 原生组件的创建。我有一个小 SceneKit 项目，它在 3d 视图中显示一个平面图（我从 this tutorial 开始）。

我的目标是连接这个视图，以便使用 Javascript 控制 3D 原生相机。

我不知道从哪里开始。网络上所有关于创建组件的资源都超出了我的范围，使用外部库或者对于像我这样的新手来说不够详细。

我的 scenekit 项目有树文件：

一个带有单个 SceneKit 视图的 main.storyboard（但是否与 react native 组件兼容？）
一个控制器视图
和一个 AppDelegate

应用代理：

import UIKit

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

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

视图控制器

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

}

首先。这可以与 RN 桥接吗？

【问题讨论】：

我在做一个类似的项目，需要桥接一个UIViewComponent。你能做到吗？

标签： ios swift react-native

【解决方案1】：

这是一个非常古老的问题，但我自己最近正在这样做，并且能够让 SceneKit 作为 UIView 的子视图运行良好，并利用 React Native doc 的 iOS 'Native UI Components' 教程作为这种方法的基础。 ..希望它对某人有所帮助。

管理器文件

#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 文件

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
 }

}

【讨论】：