react-native - カスタム ネイティブ UI コンポーネントをフラットリストの異なるデータで複数回使用できますか?

Question

各アイテムで同じカスタム UI コンポーネント (ネイティブ iOS コード) を使用するが、ビューのラベルに異なるデータ (小道具を使用して渡される) を使用するフラットリストがあります。これを実行すると、反復処理が繰り返され、各コンポーネントが他のコンポーネントの上に配置され、指定された最後のデータ セットのみが使用されます (したがって、各ビューには同じデータが含まれます)。アイテムが 1 つしかない場合は正常に動作しますが、カスタム 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
  }
}

結果：