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

Question

是否可以在 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 等任何组件都不适用于这种特殊情况。这只是语法问题。

Answer 1

你通常会用地图来做那种事情。

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

（当你在 React 中做映射时，key 是一个必要的 prop。key 需要是生成组件的唯一标识符）

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

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"
}];

对于实际映射，使用 JS 数组映射而不是 for 循环 - 应该在没有定义实际数组的情况下使用 for 循环，例如显示一定次数的东西：

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

我将映射移动到渲染方法之外的单独函数，以获得更易读的代码。 在 react native 中还有许多其他方法可以循环遍历元素列表，而您将使用哪种方式取决于您需要做什么。大多数这些方法都在this article about React JSX loops 中进行了介绍，尽管它使用了 React 示例，但其中的所有内容都可以在 React Native 中使用。如果您对此主题感兴趣，请查看！

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

Answer 4

如果你想要直接/快速，而不考虑变量：

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