javascript - React-Native:如何创建多个 Native UI 组件实例？

Question

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

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

这是我的代码的小片段:

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

Answer 1

事实证明，我在问题中写的“简化版”实际上就是答案。这是我的原始(无效)代码:

var view  = MyCustomView()

override func view() -> UIView! {
  return view
}

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