React Native Native Module - 将 JSON 属性传递给 Swift UIView

Posted 2023-03-15

【中文标题】React Native Native Module - 将 JSON 属性传递给 Swift UIView

【英文标题】：React Native Native Module - Passing JSON prop to Swift UIView

【发布时间】：2020-10-26 20:08:53

【问题描述】：

我正在我的 RN 项目中创建一个本地模块，其中包含一个带有 JSON 属性的视图，如下所示：

<MyNativeView name= firstName: "John", lastName: "Doe"  />

视图是用 Swift 构建的，我有一个用于 name 属性的设置器。这是我目前的设置

// MyNativeViewManager.m
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(MyNativeViewManager, RCTViewManager)
RCT_EXPORT_VIEW_PROPERTY(name, NSDictionary *)
@end

// MyNativeViewManager.swift
@objc(MyNativeViewManager)
class MyNativeViewManager: RCTViewManager 
  override func view() -> UIView! 
    return MyNativeView()
  

  // ...


// MyNativeView.swift
class MyNativeView: UIView 
  @objc(setName:)
  func setName(name: NSDictionary) 
    var firstName: String?
    var lastName: String?

    // This feels ugly... but does the job
    if let firstNameProp = name["firstName"] as? String 
      firstName = firstNameProp
    

    if let lastNameProp = name["lastName"] as? String 
      lastName = lastNameProp
    

    // Do stuff...
  

我想知道是否有办法将此属性转换为 struct，这样我就可以嵌套额外的 JSON 或在缺少特定字段时抛出错误。

如果我对文档的理解正确，看起来我可以使用 RCT_CUSTOM_VIEW_PROPERTY 和 RCTConvert 将属性转换为定义的类型，但我不清楚如何与 Swift 结合使用。

【参考方案1】：

你可以这样做，

/// Custom View (Swift)
@objc
class MyNativeView: UIView 
  
  @objc
  func setName(nameParts:[String: String]) 
    // your logic..
  

/// View Manager (Swift)
@objc(MyNativeViewManager)
class MyNativeViewManager: RCTViewManager 
  override func view() -> UIView! 
    return MyNativeView()
  

@interface RCT_EXTERN_MODULE(MyNativeViewManager, RCTViewManager)

RCT_CUSTOM_VIEW_PROPERTY(name, NSDictionary, MyNativeView) 
  // do your validation....
  
  // Post validation
  // 'json' is the parameter you will get here and whose type is NSDictionary
  // 'view' is the current view and whose type is MyNativeView
  [view setNameWithNameParts:json];


@end