react-native - 你可以在 flatlist 中多次使用自定义的原生 UI 组件和不同的数据吗？

Question

我有一个平面列表，我想让每个项目使用相同的自定义 UI 组件（本机 iOS 代码），但在视图的标签上使用不同的数据（使用道具传递）。当我运行它时，它会遍历并将每个组件放在另一个组件之上，并且只使用给定的最后一组数据（因此每个视图都有相同的数据）。如果我只有一项，它可以正常工作，但我似乎无法多次使用自定义 UI 组件。我注意到首先创建了 2 个视图，然后加载了道具。如果创建了多个实例，它如何知道哪个视图获取了哪些数据？在移动到下一个视图和数据之前，如何让它一次使用其数据创建 1 个视图？

我的 App.js 文件

export default class App extends Component<Props> {
      render() {
        return  (
          <SafeAreaView style={styles.container}>
             <Text style={styles.headerStyle}>RNHtmlRender Tests</Text>
            <View style={{flex:1}}>
              <FlatList  
                  data={[
                    {
                      testId: 1,
                      line: 3,
                      ctaText: " read more",
                      string: "<h3>Test #1 HTMLRenderView</h3> Three Lines, read more - Get 2.5 points per $1 spent (5% back in rewards) on qualifying purchases when you choose Standard Credit with your Credit Card."
                    },
                    {
                      testId: 2,
                      line: 2,
                      ctaText: " read more",
                      string: "<h3>Test #2 HTMLRenderView</h3> Two Lines, read more - Get 2.5 points per $1 spent (5% back in rewards) on qualifying purchases when you choose Standard Credit with your Credit Card."
                    }
                  ]}  
                  renderItem={({item}) =>  
                    <View style={{flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "green"}}>
                      <HtmlRenderView style={{alignItems: 'center', backgroundColor: "orange"}}
                      minLines={item.line}
                      ctaText={item.ctaText}
                      htmlString={item.string}
                      />
                    </View>
                    }
                  keyExtractor={item => item.testId.toString()}  
                      />
                </View>
          </SafeAreaView>
        )
      }
    

}

我的 HtmlRenderViewManager.swift 文件

@objc(HtmlRenderViewManager)
class HtmlRenderViewManager: RCTViewManager {

  override static func requiresMainQueueSetup() -> Bool {
    return true
  }

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

道具通过 HtmlRenderViewManager.m 传递

@interface RCT_EXTERN_MODULE(HtmlRenderViewManager, RCTViewManager)
    
    RCT_EXPORT_VIEW_PROPERTY(htmlString, NSString)
    RCT_EXPORT_VIEW_PROPERTY(minLines, NSNumber)  //optional
    RCT_EXPORT_VIEW_PROPERTY(ctaText, NSString) //optional
    
    @end

这是 HtmlRenderViewManager.swift 文件

class HtmlRenderView: UIView {

  var htmlLabel = UILabel()

@objc var minLines: NSNumber? {
  didSet {
    htmlLabel._numOfLines = Int(truncating: minLines ?? 3)
  }
}

@objc var ctaText: NSString? {
  didSet {
    htmlLabel._callToAction = (ctaText ?? "") as String
  }
}
  
  @objc var htmlString: NSString = "" {
    didSet {
      populateTheView()
    }
  }
  
override init(frame:CGRect) {
    super.init(frame: frame)
    setupLabel()
    }
  
  required init?(coder aDecoder: NSCoder) {
      fatalError("init(coder:) has not been implemented")
    }
  
  private func populateTheView(){
    if self.htmlString.length > 0 {
      htmlLabel.numberOfLines = Int(truncating: minLines ?? 3) // why is min lines prop not set here sometimes?
     htmlLabel.text = self.htmlString as String
    }
  }
  
  private func setupLabel() {
    let htmlLabel = self.htmlLabel
    self.addSubview(htmlLabel)
    //SET LABEL Constraints here
  }
}

结果：