React-Native：如何创建多个 Native UI 组件的实例？

Posted 2023-03-14

技术标签:

【中文标题】React-Native：如何创建多个 Native UI 组件的实例？【英文标题】：React-Native: How to create more than one instance of a Native UI component? 【发布时间】：2017-10-19 18:06:45 【问题描述】：

它在文档https://facebook.github.io/react-native/docs/native-components-android.html 上说“ViewManagers 是单例对象”

如果是这样，我将如何创建我的 UI 对象的另一个实例 - 例如在另一个屏幕上。

这是我的代码的小sn-ps：

js:

import PropTypes from 'prop-types';
import React from 'react';
import  requireNativeComponent  from 'react-native';

var DataViewNative = requireNativeComponent('DataView', myClass);

class myClass extends React.Component 

  constructor() 
    super();
  

  render() 
    return (
      <DataViewNative ...this.props />
    );
  


myClass.propTypes = 
  graphType: PropTypes.string,
;

module.exports = myClass;

原生 ios (swift)：

@interface RCT_EXTERN_MODULE(DataViewManager, RCTViewManager)

@end


@objc(DataViewManager)
class DataViewManager: RCTViewManager 

  override func view() -> UIView! 
    return myCustomView()

我希望能够做什么（js）：调用：

 <myClass/>

在两个不同屏幕上的两个不同 render() 方法中。发生的情况是，由于 RCTViewManager 是一个单例对象，对 view() 的调用会替换旧调用，因此只有最近的调用才会有 UIView

【问题讨论】：

【参考方案1】：

事实证明，我在问题中写的“简化版”实际上就是答案。这是我的原始（不工作）代码：

var view  = MyCustomView()

override func view() -> UIView! 
  return view

这违反了以下文档： https://github.com/facebook/react-native/blob/26d3af3421f0768cc2d4aeb354068ace3f7581e3/React/Views/RCTViewManager.h#L35-L42

【讨论】：