使用React Native将网格{height：10，width：10}显示为背景

Question

早上好，

为了在屏幕上调整问题和元素在多个设备之间的位置，我希望将网格显示为背景（如国际象棋网格），就像这张图片一样，之后显示像{{1}这样的项目在它上面。

问题在于，每个不同的屏幕设备（如Text and Images）网格必须是动态的。这就是为什么我不想使用图像。有关如何使用代码进行操作的任何想法？ ：/

Answer 1

我想我理解了这个问题，并且我将解释如何做到这一点。

首先我会使用网格：https://css-tricks.com/snippets/css/complete-guide-grid/如果你不熟悉的话。

我会将父亲的宽度和高度设置为动态，并取决于设备。 然后将父级设置为display:grid; grid-template-rows:repeat(#,1fr)和grid-template-columns:repeat(#,1fr)，其中＃是行数或列数。 fr单元基本上均匀地分割它需要制作的所有列/行之间的可用空间。简而言之，100px宽的父级有2个div，每个有1fr意味着两个div都得到50px。

在父母中放入适量的儿童div，它应该为你自动填充网格，如果没有，那么你必须经过并在其上加grid-area:rowNum/colNum/span 1/span 1;。

我给连续的所有div一个类，然后用.rowOne:nth-child(even)做国际象棋图案的样式，所以白色和黑色。

如果您需要选择特定的拼贴，请执行.rowOne:nth-child(tilenumber)并继续使用。

让我知道这是否有帮助，或者我根本不理解这个问题：）

Answer 2

有一个名为[react-native-bgimage] [1]的库，它允许你创建一个平铺的背景图像，所以我认为这可以帮助你做到这一点。如果您提供100x100像素和10px图块的图像，我会假设图书馆会为您重复该图像。

免责声明：我还没有测试过这个！