如何画出服装中的正方形数量？

i want to draw a layout in react native of pressable Rectangles, that would accept a costume number to put in the screen.

我想绘制一个可压缩矩形的原生布局,这将接受一个服装号码放在屏幕上。

(let's say i want my view to have 10 Rectangles, so i'd give it 10 and it would stretch this 10 to my screen exactly.) (and later if i change it to 5 it would stretch this 5 exactly to my screen) and then of course to have them all clickable and to know in the listener what square i'm clicking at.

(假设我希望我的视图有10个矩形,所以我给它10个,它会将这10个精确地延伸到我的屏幕。)(后来如果我将它改为5则会将这5个拉伸到我的屏幕上)然后当然让他们都可以点击,并在听众中知道我点击的是什么方格。

Do you know of anyway i can do this in react native ? Thnx !!!

你知道吗,无论如何我能做出反应原生的做法吗? Thnx !!!

example of when i put 10 rectangles (sorry for bad drawing) >

我放10个矩形的例子(抱歉画图不好)>

example of when i put 4 rectangles (sorry for bad drawing) >

我放4个矩形的例子(对不起绘图很抱歉)>

1 个解决方案

#1

You can try with array... By setting state to 4 or 10.

您可以尝试使用数组...通过将状态设置为4或10。

this.state ={ 
  data: [1,2,3,4]
}

You can use Loop (for, foreach..) or array mapping as below example:

您可以使用Loop(for,foreach ..)或数组映射,如下例所示:

<View style={{flex:1,flexDirection:'row'}}>
 { 
     this.state.data.map((i,k) => (
       <View style={{flex:1}}/> 
     ))
 }
</View>

In other hand and easiest ways.. u can try with some package such :

在其他方面和最简单的方式..你可以尝试使用一些包:

React Native Easy Grid

React Native Easy Grid

npm install react-native-easy-grid --save

npm install react-native-easy-grid --save

https://github.com/GeekyAnts/react-native-easy-grid/blob/master/README.md

#1