将React-Native应用程序集成到Swift 3中

I have a working app in react native. iOS project files are made by react native which is based in Objective-C. I found it harder to convert Objective-C to Swift. So I decided to make a plain Project in swift 3 and then integrate the React Native to it. I followed the instruction here : http://facebook.github.io/react-native/docs/integration-with-existing-apps.html

我有一个反应原生的工作应用程序。 iOS项目文件由react native制作,它基于Objective-C。我发现将Objective-C转换为Swift更加困难。所以我决定在swift 3中创建一个简单的Project,然后将React Native集成到它。我按照这里的说明进行操作:http://facebook.github.io/react-native/docs/integration-with-existing-apps.html

I did first steps, but when it comes to :

我做了第一步,但是当涉及到:

The Magic: RCTRootView Now that your React Native component is created via index.ios.js, you need to add that component to a new or existing ViewController. The easiest path to take is to optionally create an event path to your component and then add that component to an existing ViewController.

Magic:RCTRootView现在您的React Native组件是通过index.ios.js创建的,您需要将该组件添加到新的或现有的ViewController中。最简单的方法是可选地创建组件的事件路径,然后将该组件添加到现有的ViewController。

We will tie our React Native component with a new native view in the ViewController that will actually host it called RCTRootView .

我们将在ViewController中将我们的React Native组件与一个新的本机视图绑定在一起,它将实际托管它,称为RCTRootView。

There is no example or proper explanation.

没有例子或正确的解释。

Is there any ready to go boilerplate or any complete tutorial on how to integrate react native to swift 3 project?

是否有任何准备好的样板或任何完整的教程如何集成反应本机到swift 3项目?

---

UPDATE:

According to this tutorial : https://gist.github.com/boopathi/27d21956fefcb5b168fe

根据本教程:https://gist.github.com/boopathi/27d21956fefcb5b168fe

I updated my project to look like this : AppDelegate.swift :

我将我的项目更新为:AppDelegate.swift:

import UIKit
import CoreData

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // initialize the rootView to fetch JS from the dev server
        let rootView = RCTRootView()
        rootView.scriptURL = NSURL(string: "http://localhost:8081/index.ios.js.includeRequire.runModule.bundle")
        rootView.moduleName = "OpenCampus"

        // Initialize a Controller to use view as React View
        let rootViewController = ViewController()
        rootViewController.view = rootView

        // Set window to use rootViewController
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        self.window?.rootViewController = rootViewController
        self.window?.makeKeyAndVisible()

        return true
    }

    func applicationWillResignActive(_ application: UIApplication) {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
    }

    func applicationDidEnterBackground(_ application: UIApplication) {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }

    func applicationWillEnterForeground(_ application: UIApplication) {
        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
    }

    func applicationDidBecomeActive(_ application: UIApplication) {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }

    func applicationWillTerminate(_ application: UIApplication) {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
        // Saves changes in the application's managed object context before the application terminates.
        if #available(iOS 10.0, *) {
            self.saveContext()
        } else {
            // Fallback on earlier versions
        }
    }

    // MARK: - Core Data stack

    @available(iOS 10.0, *)
    lazy var persistentContainer: NSPersistentContainer = {
        /*
         The persistent container for the application. This implementation
         creates and returns a container, having loaded the store for the
         application to it. This property is optional since there are legitimate
         error conditions that could cause the creation of the store to fail.
        */
        let container = NSPersistentContainer(name: "OpenCampus")
        container.loadPersistentStores(completionHandler: { (storeDescription, error) in
            if let error = error as NSError? {
                // Replace this implementation with code to handle the error appropriately.
                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.

                /*
                 Typical reasons for an error here include:
                 * The parent directory does not exist, cannot be created, or disallows writing.
                 * The persistent store is not accessible, due to permissions or data protection when the device is locked.
                 * The device is out of space.
                 * The store could not be migrated to the current model version.
                 Check the error message to determine what the actual problem was.
                 */
                fatalError("Unresolved error \(error), \(error.userInfo)")
            }
        })
        return container
    }()

    // MARK: - Core Data Saving support

    @available(iOS 10.0, *)
    func saveContext () {
        let context = persistentContainer.viewContext
        if context.hasChanges {
            do {
                try context.save()
            } catch {
                // Replace this implementation with code to handle the error appropriately.
                // fatalError() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
                let nserror = error as NSError
                fatalError("Unresolved error \(nserror), \(nserror.userInfo)")
            }
        }
    }

}

ViewController.swift :

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func prefersStatusBarHidden() -> Bool {
        return true
    }


}

Project-name-bridging-header :

#ifndef OpenCampus_Briding_Header_h
#define OpenCampus_Briding_Header_h


#endif /* OpenCampus_Briding_Header_h */
find ../../../node_modules/react-native/React -name "*.h" | awk -F'/' '{print "#import \""$NF"\""}'

and this is the result :

这就是结果:

1 个解决方案

#1

Well, surprisingly code push works without editing the AppDelegate.swift. I just imported codepush at Bridging header.

好吧,令人惊讶的是代码推送工作没有编辑AppDelegate.swift。我刚刚在Bridging标头中导入了codepush。

So make a new swift file, select to make a bridging header for Objective-C, Then delete AppDelegate.m AppDelegate.h and main.h files, Import following modules in Bridging header (ProjectName-Bridging-Header.h) :

所以创建一个新的swift文件,选择为Objective-C创建一个桥接头,然后删除AppDelegate.m AppDelegate.h和main.h文件,在Bridging头中导入以下模块(ProjectName-Bridging-Header.h):

#import "RCTBridgeModule.h"
#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTRootView.h"
#import "RCTUtils.h"
#import "RCTConvert.h"
#import "CodePush.h"

And AppDelegate.swift should look like this :

AppDelegate.swift看起来像这样:

import Foundation
import UIKit

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

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

    let jsCodeLocation = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true")

    // jsCodeLocation = NSBundle.mainBundle().URLForResource("main", withExtension: "jsbundle")

    let rootView = RCTRootView(bundleURL:jsCodeLocation, moduleName: "****ModuleName****", initialProperties: nil, launchOptions:launchOptions)

    self.bridge = rootView.bridge

    self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
    let rootViewController = UIViewController()

    rootViewController.view = rootView

    self.window!.rootViewController = rootViewController;
    self.window!.makeKeyAndVisible()

    return true
  }

And Replace module name with the module you register in your index.ios.js or index.android.js (App Registery)

并将模块名称替换为您在index.ios.js或index.android.js中注册的模块(App Registery)