react-native - 如何在React-native中循环和渲染元素？

是否可以在渲染功能中循环使用相同的组件？

像这样:

...

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