Arrays react native:使用array.map进行渲染

我正在尝试使用array.map进行实验，但无法看到结果。请帮忙

我正在尝试创建一个类似日历的单元格，下面的代码不会显示任何错误或任何内容

只需迭代两个数组即可得到结果。但这行不通。我是土生土长的初学者

import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';

export default class LearnMap extends React.Component {
    constructor(props) {    
        super(props);
      
      }
     

  render() {
    var rows = [0,1,2,3,4,5,6];
    var cols = [
      ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
      [1,2,3,4,5,6,7],
      [8,9,10,11,12,13,14],
      [15,16,17,18,19,20,21],
      [22,23,24,25,26,27,28],
      [29,30,31,1,2,3,4],
      [5,6,7,8,9,10,11],    
    ];
  
    return(<View style={‌{flex:1,justifyContent:'center', alignItems:'center'}}>
    { rows.map((row, rowIndex)=>{ 

        <View key={rowIndex} style={styles.row}>         
      {   cols[row].map((col, colIndex)=>{
        <View key={colIndex} style={styles.cell}><Text key={colIndex}>{col.toString}</Text></View>
        })
      }
        </View>

    })
  }
    </View> );
  }
}
const styles = StyleSheet.create({
  container: {
      
  },
  row:{
    flexDirection:'row',
    marginLeft:10,
    marginRight:10,    
  },
  cell:
  {
    flex:1, 
    backgroundColor:'pink', 
    alignItems:'center', 
    justifyContent:'center', 
    height:45, 
    borderWidth:1, borderColor:'black'
  }


});

import React，{Component}来自'React'；
从'react-native'导入{View，StyleSheet，Text}；
导出默认类LearnMap扩展React.Component{
构造器（道具）{
超级（道具）；
      
      }
     
render（）{
var行=[0,1,2,3,4,5,6]；
var cols=[
['sun'，'mon'，'tue'，'wed'，'thu'，'fri'，'sat']，
      [1,2,3,4,5,6,7],
      [8,9,10,11,12,13,14],
      [15,16,17,18,19,20,21],
      [22,23,24,25,26,27,28],
      [29,30,31,1,2,3,4],
      [5,6,7,8,9,10,11],    
    ];
  
返回(
{rows.map（（row，rowIndex）=>{
{cols[row].map（（col，colIndex）=>{
{col.toString}
})
}
})
}
);
  }
}
const styles=StyleSheet.create({
容器：{
      
  },
行：{
flexDirection:“行”，
边缘左：10，
marginRight:10
  },
单元格：
  {
弹性：1
背景颜色：'粉红色'
对齐项目：'中心'
辩护内容：'中心'
身高：45
边框宽度：1，边框颜色：“黑色”
  }
});

您需要在

映射

函数中添加

返回

您在map函数中返回的内容将被渲染。在您的情况下，您希望执行以下操作：

rows.map((row, rowIndex)=> { 

   return (
          <View key={rowIndex} style={styles.row}>         
              {   
                  cols[row].map((col, colIndex)=> {
                      return <View key={colIndex} style={styles.cell}><Text key={colIndex}>{col.toString}</Text></View>
                  })
              }
          </View>
          )

    })

rows.map（（行，行索引）=>{
返回(
{   
cols[row].map（（col，colIndex）=>{
返回{col.toString}
})
}
)
})

---

注意：您在两个map函数中都忘记了它，因此您需要在这两个函数中都添加它，如上面的示例所示。

您需要在

map

函数中添加

return

您在map函数中返回的内容将被渲染。在您的情况下，您希望执行以下操作：

rows.map((row, rowIndex)=> { 

   return (
          <View key={rowIndex} style={styles.row}>         
              {   
                  cols[row].map((col, colIndex)=> {
                      return <View key={colIndex} style={styles.cell}><Text key={colIndex}>{col.toString}</Text></View>
                  })
              }
          </View>
          )

    })

rows.map（（行，行索引）=>{
返回(
{   
cols[row].map（（col，colIndex）=>{
返回{col.toString}
})
}
)
})

---

注意：您在两个映射函数中都忘记了它，因此您需要在这两个函数中都添加它，如上面的示例所示。

我自己解决了它。只需放置一个返回语句

 return <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
      { rows.map((row, rowIndex)=> { 
        return <View style={styles.row} key={rowIndex}>
            { cols[row].map((col, colIndex)=> {
                       return <View key={colIndex} style={styles.cell}>
                         <Text key={colIndex}> {col} </Text>
                         </View>

                     })
            }
            </View>
       })
      }
    </View>

返回
{rows.map（（row，rowIndex）=>{
返回
{cols[row].map（（col，colIndex）=>{
返回
{col}
})
}
})
}

我自己解决了。只需放置一个返回语句

 return <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
      { rows.map((row, rowIndex)=> { 
        return <View style={styles.row} key={rowIndex}>
            { cols[row].map((col, colIndex)=> {
                       return <View key={colIndex} style={styles.cell}>
                         <Text key={colIndex}> {col} </Text>
                         </View>

                     })
            }
            </View>
       })
      }
    </View>

返回
{rows.map（（row，rowIndex）=>{
返回
{cols[row].map（（col，colIndex）=>{
返回
{col}
})
}
})
}

您忘了在

行中返回
行。map（）
您忘了在
行中返回
行。map（）
注释中已经提到了这一点，为什么要将其作为答案发布？注释中已经提到了这一点，为什么要将其作为答案发布？