我的 react-native 应用程序可以使用 xcode swift 库吗？ 如何？

Question

我目前对 react-native 和 xcode 还很陌生。 所以基本上，我使用 swift 在 xcode 上制作了一个程序并导入了一个库，但现在我需要在我的 react native 应用程序中使用这个代码。 我不知道这是否可能以及如何做到这一点。

Answer 1

不幸的是，这真的取决于你想如何使用你的 swift 代码，因为 React Native 为不同的情况提供了不同的方法，但我会尝试给你一个基本的“事件桥”的例子。 首先，每个 React Native 应用程序都会自动生成一个 iOS 和 Android 项目。 导航到 iOS 文件夹并打开 Xcode 工作区。 然后只需将您的 swift 源文件拖到项目中（就像在其他所有本机应用程序中一样）。 由于 React Native 使用 Objective-C 桥接器，我们不能直接使用 Swift 代码，因此我们需要桥接 Swift -> Objc -> Z49E1703B6AAAF1D25。

让我们首先深入了解您的 Swift class：

您需要能够与 objc 通信并将方法导出到 react native 运行时，这里是 swift 文件的示例

// CustomObject.swift
import Foundation

@objc(CustomObject)
class CustomObject: NSObject {

@objc static var isSelected = false // our state

  @objc
  func selectObject() {
    CustomObject.isSelected.toggle()
    print(CustomObject.isSelected ? "selected" : "not selected")
  }

  @objc
  func getState(_ callback: RCTResponseSenderBlock) {
    callback([NSNull(), CustomObject.isSelected]) // this will return into a  
    // javascript callback to retrieve the current state
  }

  // this is needed to make sure that this will run on the main thread 
  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

现在我们需要从 Objc 调用这些方法并将其公开给 JavaScript。

// CustomObject.m

#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(CustomObject, NSObject)
RCT_EXTERN_METHOD(selectObject)
RCT_EXTERN_METHOD(getState: (RCTResponseSenderBlock)callback)
@end

这就是你所要做的。

现在您可以导航回您的 JavaScript 应用程序并导入 NativeModules。

import React, {useState} from 'react';
import {View, NativeModules, Button, Text} from 'react-native';

const TestComponent = () => {
const [selected, setSelected] = useState(false);


const triggerSelection = () => {
  NativeModules.CustomObject.selectObject()
  NativeModules.CustomObject.getStatus( (err, isSelected) => {
   setSelected(isSelected);
  });
}

return (
     <View>
       <Button title="Button" onPress={triggerSelection} />
       <Text>{selected}</Text>
     </View>
 );

}

要将更复杂的结构从 native 传递到 javascript，只需看看这个文档，它实际上并没有那么糟糕。

React Native - 原生模块