【问题标题】:Integrate React-Native app to Swift 3将 React-Native 应用程序集成到 Swift 3
【发布时间】:2017-03-18 04:10:58
【问题描述】:

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

我做了第一步,但说到:

魔术:RCTRootView 现在你的 React Native 组件是 通过 index.ios.js 创建,您需要将该组件添加到新的或 现有的 ViewController。最简单的方法是选择 为您的组件创建一个事件路径,然后将该组件添加到 一个现有的 ViewController。

我们将把我们的 React Native 组件与一个新的原生视图绑定在 实际托管它的 ViewController 称为 RCTRootView 。

没有例子或适当的解释。

是否有任何关于如何将 react native 集成到 swift 3 项目的样板文件或完整教程?


更新:

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

我将我的项目更新为如下所示: 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
    }


}

项目名称桥接头:

#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"\""}'

这是结果:

【问题讨论】:

    标签: ios objective-c swift react-native


    【解决方案1】:

    嗯,令人惊讶的是,无需编辑 AppDelegate.swift 即可实现代码推送。我刚刚在 Bridging header 处导入了 codepush。

    所以创建一个新的 swift 文件,选择为 Objective-C 创建一个桥接头, 然后删除 AppDelegate.m AppDelegate.h 和 main.h 文件, 在 Bridging header (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"
    

    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
      }
    

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

    【讨论】:

      猜你喜欢
      • 2018-08-29
      • 1970-01-01
      • 1970-01-01
      • 2017-05-02
      • 2018-12-19
      • 1970-01-01
      • 1970-01-01
      • 2016-01-01
      • 2017-05-04
      相关资源
      最近更新 更多