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

。。。
onPress=（）=>{
...
};
initialArr=[“蓝色”、“文本1”]、[“红色”、“文本2”]；
按钮列表arr=[]；
for（设i=0；i

---

我的意思是，这只是有限的组件列表，所以像ListView/ScrollView等任何组件都不适用于这种特殊情况。这只是语法问题。

您通常会使用map来处理这类事情

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

buttonsListArr=initialArr.map（buttonInfo=>(
{按钮信息[1]}
);

（无论何时在React中进行映射，键都是必需的道具。键需要是生成的组件的唯一标识符）

另一方面，我会使用对象而不是数组。我发现它看起来更好：

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

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

initialArr=[
{
id:1，
颜色：“蓝色”，
文本：“文本1”
},
{
id:2，
颜色：“红色”，
文本：“文本2”
},
];
buttonsListArr=initialArr.map（buttonInfo=>(
{buttonInfo.text}
);

render（）{
返回(
{initialArr.map（（属性，键）=>{
返回(
{prop[1]}
);
})}
)
}

---

对于初始数组，最好使用object而不是array，因为这样您就不用担心索引了，而且更清楚什么是什么：

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

对于实际映射，请使用JS Array map而不是For loop-在没有定义实际数组的情况下，应使用For loop，例如多次显示某些内容：

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

renderButtons() {
    return initialArr.map((item) => {
        return (
            <Button 
                style={{ borderColor: item.color }}
                onPress={this.onPress}
            >
                {item.text}
            </Button>
        );
    });
}

...

render() {
    return (
        <View style={...}>
            {
                this.renderButtons()
            }
        </View>
    )
}

onPress=（）=>{
...
};
renderButtons（）{
返回initialArr.map（（项）=>{
返回(
{item.text}
);
});
}
...
render（）{
返回(
{
this.renderButtons（）
}
)
}

我将映射移动到render方法之外的单独函数，以获得更可读的代码。 在react-native中有许多其他方法可以循环浏览元素列表，您将使用哪种方法取决于您需要执行的操作。这些方法中的大多数都包含在中，尽管它使用了react示例，但其中的所有内容都可以在react-native中使用。如果您对本主题感兴趣，请查看

---

另外，不是关于循环的主题，而是因为您已经在使用数组语法定义onPress函数，所以无需再次绑定它。这同样只适用于在组件中使用此语法定义函数的情况，因为箭头语法会自动绑定函数。

如果您想要直接/快速离开，无需协助变量：

{
 urArray.map((prop, key) => {
     console.log(emp);
     return <Picker.Item label={emp.Name} value={emp.id} />;
 })
}

{
地图（（道具，钥匙）=>{
控制台日志（emp）；
返回；
})
}

为什么不改用map？

const buttons=buttonsListArr.map（item=>{item[1]}

render（）{return（）}

看起来不错，但我会将映射移到return语句之前，以使事情看起来更好，并且只在视图中使用映射的数组变量名。请注意，map函数的第二个参数是要处理的数组中元素的索引。尽管它们每次都可能是不同的整数，但它们可能不是不一定是key属性的好候选。数组元素可能会更改，因此密钥也必须更改（如果使用唯一标识符，即使索引已更改，密钥也将保持不变）。根据React文档，“如果项目可以重新排序，我们不建议对键使用索引，因为那样会很慢。”——（键部分，底部）@nbkhope这是关于键的新信息。谢谢！谢谢你的回答。你能解释一下为什么使用map吗？我尝试了forEach，但没有成功。我不明白为什么我必须使用map。@AlexWang你使用map是因为forEach只需迭代元素，而map返回一个大小相同的数组，其中填充了e mapping function.react-like渲染是基于返回的，

forEach

不返回任何东西（从内部），因此不适合基于返回的渲染循环，对：-）但是如果您不想渲染并只记录数据/发送数据（基本上是返回以外的任何内容），那么

forEach（（el，i）=>…

在语义上更有意义：）如果任何人在重新创建此答案时遇到问题，回想一下

是自动关闭的（据我所知），并且要在其中显示文本，必须通过prop（property aka attribute）

title=“”

为什么renderButtons函数有两个返回语句？

{
 urArray.map((prop, key) => {
     console.log(emp);
     return <Picker.Item label={emp.Name} value={emp.id} />;
 })
}