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 />'));

在React Native中：

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

Answer 2

首先，您需要渲染盒子：

let numberOfBoxesRequired = 4; 

const gridBoxes  = (props) => {
    let boxes = [];
    for (let i=0; i<numberOfBoxesRequired; i++) {    
        for (let j=0; j<numberOfBoxesRequired; j++) {
            boxes.push(<Box />); // assume Box is your box component
        }

    }
    return (
        <View style={mainGridBox}>  
            {boxes} // render the boxes
        </View>
    )
}

然后，您将不得不设置gridBox的样式：

.mainGridBox {
  flex: 1,
  flexWrap: "wrap";
}

.box {
  flexBasis: 0.25; // this will make a box fill 25% of the container width
  width: 30;  // example width
  height: 30; // example height
}

这是最接近您的实现方式，但我建议您使用Array.map()，如 estus 在其答案中指出的那样。

在React Native中设计星型

2 个答案: