在 React Native 中使用 nativeID / 使用 RCTRootView 子视图的正确方法是啥？

Posted 2023-03-15

【中文标题】在 React Native 中使用 nativeID / 使用 RCTRootView 子视图的正确方法是啥？

【英文标题】：What is the correct way of using nativeID / working with RCTRootView subviews in React Native?在 React Native 中使用 nativeID / 使用 RCTRootView 子视图的正确方法是什么？

【发布时间】：2019-09-15 06:55:52

【问题描述】：

我有一个现有的 ios 应用，我正在使用 react native 的 RCTRootView 为我的应用绘制一些组件。

// swift
private lazy var RNContent: RCTRootView = 
    let mockData:NSDictionary = ["someProps": self.someProps]
    let RNContent = RCTRootView(bridge: self.bridge, moduleName: "RNContent", initialProperties: mockData as [NSObject : AnyObject])!
    return RNContent
  ()

// JS
AppRegistry.registerComponent('RNContent', () => component);

---

这是我的 RN 层次结构的样子

<View>
  <View>
   <Text />
   <ScrollView /> <--
  <View>
</View>

我想在本地获取这个ScrollView。根据文档nativeID 应该会有所帮助。但是，我在 JS 端定义的 RCTRootView 中看不到任何子视图。事实上，根视图只有一个名为 RCTRootContentView 的子视图，它没有任何其他可用的子视图。

所以我的问题是在原生端获取RCRootView 的子视图的正确方法是什么？

我尝试了一些方法，例如使用UIManager 的addUIBlock 来获取视图寄存器，但我认为我缺少与RCTRootView 及其工作原理相关的明显一点.

有趣的是，如果我在我的 RN 层次结构中直接使用本机注册的组件（通过 RCT_EXTERN_MODULE 注册），我可以看到该组件与 RCTRootContentView 分离，并且它还有一个我在JS端。

 RCTExecuteOnUIManagerQueue 
      self.bridge.uiManager.addUIBlock  (uiManager: RCTUIManager?, viewRegistry:[NSNumber : UIView]?) in

        uiManager?.view(forNativeID: "SelfAssignedID", withRootTag: self. RNContent.reactTag) // nil

        viewRegistry?.forEach( (key: NSNumber, value: UIView) in
          print("Test1: ", key, value.nativeID) // only native components has nativeID, which does makes sense because RCTRootContentView doesn't have subviews... but why not? is there a way to get hold of them? If not, why not?
        )
      
    

---

任何帮助都会有所帮助，谢谢！

【参考方案1】：

事实上，根视图只有一个名为 RCTRootContentView 的子视图，它没有任何其他可用的子视图。

这对我来说似乎是个问题。 JS 中的<Text/> 节点应该在原生内容视图中创建一个UITextView 子节点。也许尝试实际向<Text/> 和<ScrollView/> 添加一些内容以使其呈现？

我想在本机端获得这个 ScrollView。

您能否提供更多有关您正在尝试做的事情的背景信息？我有一种感觉 nativeID API 不是您想要使用的。

【讨论】：

嘿彼得，感谢您的回答，一旦组件树挂载，我只需要选择 nativeID 的视图，显然这只是一个时间问题。 nativeID 正如我所怀疑的那样工作。前几天我想通了，忘了结束这个问题，我现在就做。