[解決済み] React-nativeで要素をループさせてレンダリングする方法とは？

質問

Render機能で、同一コンポーネントをループさせることは可能ですか。

このようなものです。

...

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>
)};

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

どのように解決するのですか？

このような場合、通常、mapを使用します。

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

(キーはReactでマッピングを行うときは必ず必要なpropです。キーは生成されるコンポーネントの一意な識別子である必要があります)

余談ですが、私なら配列ではなくオブジェクトを使います。その方が見た目がきれいだと思うからです。

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

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