コンポーネントのプロパティと状態を繰り返し変更します

Question

私はHTML5アプリケーションをReact Nativeに移植しようとしています。私の元のアプリでは、私はカスタム長さ、maxLength、説明、isActiveと色の属性を持つ24 DOM要素を持っていた。私はjQuery.each（）を使用します。要素を反復処理し、コンストラクタ関数を使用して各要素のindexおよびjQueryオブジェクトを格納します。

コンストラクタには、関連するスタイルの変更とともに属性を取得/設定するためのさまざまなプロトタイプ関数がありました。いくつかの関数は、隣接する要素の属性やスタイルを変更し、構築されたオブジェクトの配列を使ってこれらの関数にアクセスします。

私の質問です。どのようにしてReact Nativeで同様のパターンに従うことができますか？具体的には、配列に「要素」を追加し、その配列を繰り返して、選択した要素に視覚的/データ的な変更を加える方法はありますか？

例：

jQueryの

$(document).ready(function(){ 
    var activities = []; 
    Activity = function (idx, ele) { 
     this.idx = idx; 
     this.ele = ele; 
    } 
    $('.activity').each(function(index){ 
     activities[index] = new Activity(index, $(this)); 
    }); 
}); 

Answer 1

あなたはアレイ内のプロパティを定義し、それを反復することができます。それらを変更するには、配列を操作します。多分それを州に入れてください。

const elements = [ 
    { 
    style: { 
     color: 'red', 
    }, 
    text: 'first', 
    }, 
    { 
    style: { 
     color: 'green', 
    }, 
    text: 'second', 
    }, 
    { 
    style: { 
     color: 'blue', 
    }, 
    text: 'third', 
    }, 
] 

...

elements.map((element) => 
    <View style={element.style}> 
    <Text>{element.text}</Text> 
    </View> 
)