ios - 如何操作 React Native - Native UI 组件的属性？

Question

我正在开发 React Native 应用程序。

该应用程序由基于 Web 的 View 和 native UI View (组件)组成。

虽然基于 Web 的 View 和 native ui View 的渲染工作正常，但我无法操作 native ui View 的属性，例如背景颜色。

我不得不说我的项目结构并没有那么简单，因为我做了很多桥接，从React到Objective-C，从Objective-C到Swift等等。

简单介绍一下我的项目结构:

MyUIView.h

#import <UIKit/UIKit.h>

// Define which methods and properties have to be implemented in MyUIView
@interface MyUIView : UIView

@end

MyUIView.m

#import "MyUIView.h"

// Represents the native MyUIView
@implementation MyUIView
  -(instancetype) init {
    self = [super init];
    if (self) {
      [self setUp];
    }
    return self;
  }

  -(void) setUp {
    UIView * myUIView = [[UIView alloc] initWithFrame:CGRectMake(-50, -250, 100, 100)];
    [myUIView setBackgroundColor:[UIColor grayColor]];
    [self addSubview:myAudioRecorderUIView];
  }

@end

MyUIManager.h

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
#import <React/RCTViewManager.h>

@interface MyUIManager : RCTViewManager
  @property (nonatomic, strong) UIView *myUIView;

  - (void) changeBackgroundColor: (UIColor*)color;
@end

MyUIManager.m

#import "MyUIManager.h"
#import "reactnative-Swift.h"

#import "MyUIView.h"
#import <UIKit/UIKit.h>

@import UIKit;

// Controls the rendering of native view in the React part of our application
@implementation MyUIManager
  MyUIManager *myUIManager;
  MyUIView *myUIView;

  + (void) initialize {
    myUIManager = [MyUIManager allocWithZone: nil];
    myUIView = [[MyUIView alloc] init];
  }

  + (id) allocWithZone:(NSZone *)zone {
    static MyUIManager *sharedInstance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
      sharedInstance = [super allocWithZone:zone];
    });
    return sharedInstance;
  }

  - (void) changeBackgroundColor: (UIColor*)color {
    dispatch_sync(dispatch_get_main_queue(), ^{
      self.myUIView.backgroundColor = UIColor.redColor;
    });
  }

  RCT_EXPORT_MODULE()

  - (UIView *) view
  {
    return myUIView;
  }

@end

MyViewController.swift

import Foundation
import UIKit

@objc open class MyViewController : UIViewController {

  let myUIManager: MyUIManager = MyUIManager();

  @objc func changeColor() {
    myUIManager.changeBackgroundColor(UIColor.red)
  }
}

我期望的是，从我的 Swift 类调用 changeColor 方法，更改我的 native ui View 的颜色，因为 myUIManager 的changeBackgroundColor 是在设置颜色的地方调用的。但颜色确实会改变。它保持灰色，就像在 MyUIView.m 的 setUp 方法中定义的那样。

有什么建议吗？

Answer 1

必须进行一些调整才能使其正常工作，最重要的是将要操作的 View 包装到另一个 View 中，然后返回父 View 而不是 subview :

MyUIView.m

#import "MyUIView.h"

// Represents the native MyUIView
@implementation MyUIView
  -(instancetype) init {
    self = [super init];
    if (self) {
      [self setUp];
    }
    return self;
  }

  - (instancetype)initWithFrame:(CGRect)frame {
    NSLog(@"init with frame: %@", NSStringFromCGRect(frame));
    self = [super initWithFrame:frame];
    if ( self ) {
      [self setUp];
    }
    return self;
  }

  - (void)setUp {
    self.backgroundColor = [UIColor grayColor];
  }

  - (void)layoutSubviews {
    NSLog(@"layout subviews");
  }

@end

MyUIManager.h

#import <UIKit/UIKit.h>
#import <React/RCTViewManager.h>

@interface MyUIManager : RCTViewManager
  @property (nonatomic) UIView *myParentUIView;
  @property (nonatomic) UIView *myUIView;

  - (void) changeBackgroundColor: (UIColor*)color;
@end

MyUIManager.m

#import "MyUIManager.h"
#import "reactnative-Swift.h"

#import "MyUIManager.h"
#import "MyUIView.h"
#import <UIKit/UIKit.h>

// Controls the rendering of native view in the React part of our application
@implementation MyUIManager
  MyUIView *myParentUIView;
  MyUIView *myUIView;

  // Instantiate MyUIView (parent and child)
  + (void) initialize {
    myParentUIView = [[MyUIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
    myUIView = [[MyUIView alloc] initWithFrame:CGRectMake(-50, -250, 100, 100)];
    [myParentUIView addSubview:myUIView];
  }

  // Change background color of view
  - (void) changeBackgroundColor: (UIColor*)color {
    dispatch_sync(dispatch_get_main_queue(), ^{
      myParentUIView.subviews.firstObject.backgroundColor = color;
    });
  }

  RCT_EXPORT_MODULE()

  - (UIView *)view {
    return myParentUIView;
  }

@end