React Native循环创建组件

React Native 中循环创建组件需要用到 map 函数

map 方法的作用是映射，也就是原数组被映射成新数组

var data = [1, 2, 3, 4]
console.log(data)

var arrayOfSquares = data.map((item) => {
    return item*item
})

console.log(arrayOfSquares)

输出结果为：

(4)[1, 2, 3, 4]
(4)[1, 4, 9, 16]

所以可以利用此特性循环创建组件

var items = ["组件1", "组件2", "组件3"]

class LoopComponent extends Component {
    textComponent(item) {
        return <Text>{item}</Text>
    }
    
    render() {
        return (
            <View>
                {/* 方式1 */}
                {items.map((item) => {
                    return (
                        <Text>{item}</Text>
                    );
                })}
                {/* 方式2 */}
                {/* {items.map((item) => this.textComponent(item))} */}
            </View>
        );
    }
}

二维数组需要在每一个循环里面都显示声明return，否则组件不会显示

var items = [["组件1", "组件2", "组件3"],["组件4", "组件5", "组件6"],["组件7", "组件8", "组件9"]]

render() {
  return (
    {items.map((obj) => {
        return (
          obj.map((item) => {
            return <Text>{item}</Text>
          })
        );
      })}
   );
}