Swift Modules for React Native

た入场券 2022-08-21 07:43 9阅读 0赞

React Native is an Objective-C application framework that bridges JavaScript applications running in the JSCore JavaScript engine to iOS and Android native APIs.

In theory, you write your application logic in JSX and ES6/7 and transpile it to JavaScript, and the application framework loads all that as a bundle.

In practice, you will want to expose your own custom native code to your JavaScript application. You may want to provide access to 3rd party library APIs or iOS framework features that aren’t exposed (yet) by React Native.

React Native is written in Objective-C, but we can write modules in Swift and expose them to our applications. The documentation on the React Native site briefly talks about “[Exporting Swift][],” but is thin on the details of doing much of anything in Swift. In this article, we’ll do a deeper dive into interfacing Swift to JavaScript.

It is assumed you already have React Native and its prerequisites installed on your system. You can find the code used in this article in this GitHub repository:[https://github.com/ModusCreateOrg/swift-modules-for-react-native][https_github.com_ModusCreateOrg_swift-modules-for-react-native].

Create a React Native project and open it in Xcode:

$ react-native init SwiftBridge && cd SwiftBridge
    $ ls
    android/         index.ios.js     node_modules/
    index.android.js ios/             package.json
    $ ls ios
    SwiftBridge/         SwiftBridge.xcodeproj/ SwiftBridgeTests/
    $ open ios/SwiftBridge.xcodeproj

Click the run button in Xcode and see that the project builds and runs.

[![SMRN01][]][SMRN01]

[![SMRN02][]][SMRN02]

At this point, we know that if the application fails to compile or run, it is something we’ve done to the project at fault.

We’ll start by implementing [the CalendarManager sample code from the React Native docs][Exporting Swift] and see that it works.

First, we need to add our Swift source file. Right click on SwiftBridge and select “New File…”:

[![SMRN03][]][SMRN03]

Choose iOS and Swift File from the “Choose template” dialog:

[![SMRN04][]][SMRN04]

Choose a filename for the file:

[![SMRN05][]][SMRN05]

You will be asked if you would like to configure an Objective-C bridging header. We will need this, so click on the Create button:

[![SMRN06][]][SMRN06]

At this point, Xcode has created two files in the project:

[![SMRN07][]][SMRN07]

We copy the CalendarManager.swift example code from the React Native docs page and paste it into our CalendarManager.swift file:

//
    //  CalendarManager.swift
    //  SwiftBridge
    //
    //  Created by Michael Schwartz on 12/11/15.
    //  Copyright © 2015 Facebook. All rights reserved.
    //
    
    import Foundation
    
    // CalendarManager.swift
    
    @objc(CalendarManager)
    class CalendarManager: NSObject {
       
      
      @objc func addEvent(name: String, location: String, date: NSNumber) -> Void {
       
        // Date is ready to use!
      }
      
    }

Unfortunately, we have to provide an Objective-C file that exposes our Swift to the React Native Objective-C framework. Create the file “CalendarManageBridge.m” by selecting “New File” as before and choose Objective-C File this time:

[![SMRN08][]][SMRN08]

This time you will be presented with a “Choose options for your new file” dialog:

[![SMRN09][]][SMRN09]

Enter “CalendarManagerBridge” in the File text field and click the Next button. Click the Create button on the next dialog:

[![SMRN10][]][SMRN10]

The file is added to your project.

[![SMRN11][]][SMRN11]

Copy and paste the code from the React Native docs page to this file:

//
    //  CalendarManagerBridge.m
    //  SwiftBridge
    //
    //  Created by Michael Schwartz on 12/11/15.
    //  Copyright © 2015 Facebook. All rights reserved.
    //
    
    #import 
     
      
    
    
      // CalendarManagerBridge.m
      
    
      #import "RCTBridgeModule.h"
      
    
    
      @interface
       RCT_EXTERN_MODULE
      (
      CalendarManager
      ,
       
      NSObject
      )
      
    
    RCT_EXTERN_METHOD
      (
      addEvent
      :(
      NSString
       
      *)
      name location
      :(
      NSString
       
      *)
      location date
      :(
      NSNumber
       
      *)
      date
      )
      
    
    
      @end

Finally, we edit the SwiftBridge-Bridging-Header.h file and copy the two lines from the React Native docs page there:

//
    //  Use this file to import your target's public headers that you would like to expose to Swift.
    //
    
    // CalendarManager-Bridging-Header.h
    #import "RCTBridgeModule.h"

Click on the run button in Xcode again and the project should run. If not, you did something wrong in the above steps.

In theory, we now have our Swift CalendarManager class exposed to JavaScript. It should appear to JavaScript as React.NativeModules.CalendarManager. Use the editor of your choice to add the following line to index.ios.js, just after the line that required react-native:

var React = require(‘react-native’);                // after this line
    console.dir(React.NativeModules.CalendarManager);  // ← add this line

When we run the project from Xcode with this line, we will get a red screen error:

[![SMRN12][]][SMRN12]

It seems console.dir() is only present if we’re debugging via Chrome. Click the Dismiss (ESC) link on the red screen, then from the Simulator’s Hardware menu, choose Shake Gesture and choose “Debug in Chrome” from the action sheet that appears in the emulator window:

[![SMRN13][]][SMRN13]

[![SMRN14][]][SMRN14]

You should see a new window or tab in Chrome that looks something like this:

[![SMRN15][]][SMRN15]

After hitting Command-Shift-J as the page suggests, you should see something like this:

[![SMRN16][]][SMRN16]

Note that the console.dir() did work and you can expand the Object to see that our React.NativeModule.CalendarManager object is exposed to JavaScript and it contains the addEvent() method as we expect.

Let’s implement some code in the addEvent() method to see that we can call it from JavaScript and access the arguments passed to Swift. Edit CalendarManager.swift so it looks like this:

All that’s really changed is the NSLog() call to dump the passed variables. Let’s also add a call to the addEvent() method to index.ios.js, just after the console.dir():

React.NativeModules.CalendarManager.addEvent(‘One’, ‘Two’, 3);

When we run this, and the application crashes. There is an error reported in both Chrome Dev Tools and Xcode and in the simulator.

[![SMRN17][]][SMRN17]

[![SMRN18][]][SMRN18]

[![SMRN19][]][SMRN19]

Note that the NSLog() did work, but the React Native framework displayed the red screen.

The fix for this is to add “nonnull” to the CalendarManagerBridge.m file:

RCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)date)

With this change, the app works without any errors. We can also see in the Xcode console the NSLog() output:

[![SMRN20][]][SMRN20]

(Note: I created a GitHub issue about this problem with the React Native documentation page and it has been fixed).

We have verified we can access the arguments passed to our Swift method from JavaScript.

We cannot simply return values to JavaScript because React Native’s JavaScript/Native bridge is asynchronous. That is, you have to implement your Swift method with a callback parameter and call it with a callback function from JavaScript, or you may implement events.

Let’s examine the callback mechanism first. Change the RCT\_EXTERN\_METHOD line in CalendarManagerBridge.m to read:

RCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)date callback: (RCTResponseSenderBlock)callback);

This adds a 4th parameter to the method, a callback function. In CalendarManager.swift, we need to alter the the addEvent() method:

@objc func addEvent(name: String, location: String, date: NSNumber, callback: (NSObject) -> () ) -> Void {
       
     // Date is ready to use!
     NSLog("%@ %@ %@", name, location, date)
     callback( [[
       "name": name,
       "location": location,
       "date" : date
     ]])
    }

What this version of addEvent() does is call the callback() method with a JavaScript Object that has the argument names/values as key/value pairs. In Swift, we create an NSObject with the \[ key: value \] syntax. The argument to the callback from Swift is an array of argument values. In this case, we have just the one Object.

We need to modify the JavaScript code in index.ios.js to pass a callback. It should look like this:

React.NativeModules.CalendarManager.addEvent("One", "Two", 3, function(o) {
       
        console.log(‘In Callback’);
        console.dir(o);
    });

When we run this version of the code in the simulator, this is displayed in the JavaScript debugger console:

[![SMRN21][]][SMRN21]

In order to use events, we need to modify the ‘CalendarManager-Bridging-Header.h’ file to import additional headers from React Native. The file should read:

//
    //  Use this file to import your target's public headers that you would like to expose to Swift.
    //
    
    
    // CalendarManager-Bridging-Header.h
    
    #import "RCTBridge.h"
    #import "RCTBridgeModule.h"
    #import "RCTEventDispatcher.h"

An RCTBridge instance contains an eventDispatcher that we can use to send events to JavaScript from Swift. In order to get this instance, we can have one synthesized for us in our CalendarManager class. We can also verify that it is synthesized by using NSLog() to dump its value.

Modify the class’ code in CalendarManager.swift so it looks like this:

class CalendarManager: NSObject {
       
      
      var bridge: RCTBridge!  // this is synthesized
    
      @objc func addEvent(name: String, location: String, date: NSNumber, callback: (NSObject) -> () ) -> Void {
       
        // Date is ready to use!
        NSLog("Bridge: %@", self.bridge);
        NSLog("%@ %@ %@", name, location, date)
        callback( [[
          "name": name,
          "location": location,
          "date" : date
          ]])
      }
      
    }

There is the bridge member that will be synthesized and in the addEvent() method there is a call to NSLog() to print the value of the bridge. The value printed should be some hex number that’s the address of the bridge instance.

When we run the code, we can see that the bridge member is synthesized:

[![SMRN22][]][SMRN22]

Note that the code uses NSLog() instead of print(). NSLog is synchronized and works better with threading. It also prints a timestamp and prints to the device console when running on device.

Ultimately debug logging should be wrapped by some other means so the printing can be disabled or directed as you want.

Modify the CalenderManager class one more time so it looks like this:

class CalendarManager: NSObject {
       
      
      var bridge: RCTBridge!  // this is synthesized
    
      @objc func addEvent(name: String, location: String, date: NSNumber, callback: (NSObject) -> () ) -> Void {
       
        // Date is ready to use!
        NSLog("Bridge: %@", self.bridge);
        NSLog("%@ %@ %@", name, location, date)
        let ret =  [
          "name": name,
          "location": location,
          "date" : date
          ]
        callback([ret])
        self.bridge.eventDispatcher.sendAppEventWithName("EventReminder", body: ret)
      }
      
    }

The sendAppEventWithName() method takes an event name and an arbitrary object that is sent to the JavaScript event handler. In the code above, we’re assigning the NSObject with arguments as key/value pairs to a variable and using it to pass to both the callback() and the event argument.

Modify the JavaScript code near the top of index.ios.js so it reads:

var React = require('react-native')
    console.dir(React.NativeModules.CalendarManager)
    var subscription = React.NativeAppEventEmitter.addListener(
        'EventReminder',
        (reminder) => {
       
            console.log(‘EVENT’)
            console.log('name: ' + reminder.name)
            console.log('location: ' + reminder.location)
            console.log('date: ' + reminder.date)
        }
    );
    React.NativeModules.CalendarManager.addEvent("One", "Two", 3, function(o) {
       
        console.log('In Callback')
        console.dir(o)
    })

We’re really just adding the subscription logic before calling addEvent(). When we run this version of the code, we see the expected output in the Chrome console:

[![SMRN23][]][SMRN23]

Finally, let’s export some constant members from the CalendarManager swift class to JavaScript. Add this code to the CalendarManager class before the closing brace:

@objc func constantsToExport() -> NSObject {
       
        return [
          "x": 1,
          "y": 2,
          "z": "Arbitrary string"
        ]
      }

When we run the project and expand the first Object printed in the Chrome console, we see our constants:

[![SMRN24][]][SMRN24]

In conclusion, we now have patterns to interface Swift native code to our JavaScript in React Native. From here we can implement our application logic in either language, as appropriate.

From:  [http://moduscreate.com/swift-modules-for-react-native/][http_moduscreate.com_swift-modules-for-react-native]

[Exporting Swift]: https://facebook.github.io/react-native/docs/native-modules-ios.html#exporting-swift
[https_github.com_ModusCreateOrg_swift-modules-for-react-native]: https://github.com/ModusCreateOrg/swift-modules-for-react-native
[SMRN01]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN01.png
[SMRN02]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN02.png
[SMRN03]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN03.png
[SMRN04]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN04.png
[SMRN05]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN05.png
[SMRN06]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN06.png
[SMRN07]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN07.png
[SMRN08]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN08.png
[SMRN09]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN09.png
[SMRN10]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN10.png
[SMRN11]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN11.png
[SMRN12]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN12.png
[SMRN13]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN13.png
[SMRN14]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN14.png
[SMRN15]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN15.png
[SMRN16]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN16.png
[SMRN17]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN17.png
[SMRN18]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN18.png
[SMRN19]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN19.png
[SMRN20]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN20.png
[SMRN21]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN21.png
[SMRN22]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN22.png
[SMRN23]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN23.png
[SMRN24]: http://moduscreate.com/wp-content/uploads/2016/01/SMRN24.png
[http_moduscreate.com_swift-modules-for-react-native]: http://moduscreate.com/swift-modules-for-react-native/