React-nativeの要素をループしてレンダリングする方法は？

Question

レンダリング機能で同じコンポーネントをループすることはできますか？このような

何か：

... 

onPress =() => { 
... 
}; 

initialArr = [["blue","text1"],["red","text2"]]; 
buttonsListArr = []; 

for (let i = 0; i < initialArr.length; i++) 
{ 
buttonsListArr.push(
    <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button> 
); 
} 

... 

render() { 
    return (
    <View style={...}> 
    {buttonsListArr} 
    </View> 
)}; 

私は、これはコンポーネントの単なる有限リストであることを意味するので、リストビュー/ ScrollViewなどのような任意のコンポーネントは、この特定の場合には適用されません。これは単なる構文質問です。

Answer 1

あなたは通常、そのような種類のマップを使用します。側と

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button> 
); 

（生成されたコンポーネントの一意の識別子であること。キーニーズに反応にマッピングを行うたびにキーが必要プロパある）

、Iは代わりにオブジェクトを使用します配列。私はそれが見え見つけるよりよい：

initialArr = [ 
    { 
    id: 1, 
    color: "blue", 
    text: "text1" 
    }, 
    { 
    id: 2, 
    color: "red", 
    text: "text2" 
    }, 
]; 

buttonsListArr = initialArr.map(buttonInfo => (
    <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button> 
); 

Answer 2

render() { 
    return (
    <View style={...}> 
     {initialArr.map((prop, key) => { 
     return (
      <Button style={{borderColor: prop[0]}} key={key}>{prop[1]}</Button> 
     ); 
     })} 
    </View> 
) 
} 

として、あなたは、インデックスを心配されることはありませんトリック初期アレイの場合

Answer 3

、配列の代わりに、より良い使用目的を行う必要があり、それは次のようになりますはるかに明確に何が何であるか：実際のマッピングについては

const initialArr = [{ 
    color: "blue", 
    text: "text1" 
}, { 
    color: "red", 
    text: "text2" 
}]; 

、forループの代わりに、JSの配列マップを使用 - 何か特定のNUMを表示するように定義された実際の配列は、ありませんときのケースで使用されるべきであるforループ時々のアクセス：

私は、より読みやすいコードのために、レンダリングメソッドの外部で別の機能にマッピングを移動しました。 反応ネイティブの要素のリストをループするには他にも多くの方法があります。どのように使用するかは、何をする必要があるかによって異なります。これらの方法のほとんどはthis article about React JSX loopsでカバーされていますが、Reactの例を使用していますが、そのすべてがReact Nativeで使用できます。あなたがこのトピックに興味があるなら、それをチェックしてください！

また、ループのトピックではなく、すでにonPress関数を定義するための配列構文を使用しているので、再度バインドする必要はありません。これは、コンポーネント内でこの構文を使用して関数が定義されている場合にのみ適用されます。これは、矢印構文が関数を自動的にバインドするためです。