在React Native中设计星形图案

Question

我试图在反应本地而不是星星的情况下绘制星形图案,假设是方形框.

星形图案看起来像这样

****
****
****
****
****

在Vanila JS,它看起来像

let rows=5;
 for(let i=1; i <= 5; i++) {
  for(let j=1; j<=5; j++){   
   document.write('*');
  }
  document.write('<br />');
}

但那是vanila JS,我想在React-native功能组件中做同样的事情,然后在JSX中显示它

考虑这个我的功能组件反应原生

let numberOfBoxesRequired = 4; 
let array = []

const gridBoxes  = (props) => {

    for (let i=0; i<numberOfBoxesRequired; i++) {
        for (let j=0; j<numberOfBoxesRequired; j++) {

        }
    }
    return (
        <View style={mainGridBox}>  

        </View>
    )
}

问题:我该怎么办？

Answer 1

在普通的 JavaScript 和 React 中也是一样的：

const starLines = Array(4).fill('*'.repeat(4));

一旦有数据，就可以按照当前应用程序特定的方式输出。

在简单的 JavaScript 中：

document.write(starLines.join('<br />'));

在反应本机中：

<View style={mainGridBox}>{starLines.map(line => <Text>{line}</Text>)}</View>