React Native FlatList item with different position (Type Vertical Scroll Game Map)答案

【问题标题】：React Native FlatList item with different positions (Type Vertical Scroll Game Map)React Native FlatList item with different position (Type Vertical Scroll Game Map)
【发布时间】：2019-05-08 13:01:18
【问题描述】：

大家好...

CONTEXT 我正在使用 Expo (30.0.1) 使用 react-native 应用程序 (SDK-30)，我需要在其中构建垂直方向的项目列表。我使用了一个负责在屏幕上绘制项目的 FlatList，但在 FlastList 下我有一个渲染图像类型 Map Game Vertical。

需要我需要将每个项目按顺序放置在道路图像上方。

尝试的解决方案

-对每一项进行绝对定位，负值和正值连续放置，所以第一项在左边，下一项在右边。

-将每个项目直接放在指定位置，不要使用FlatList。

问题

以前的解决方案的问题是每个位置都会根据设备大小而变化。

其他信息

-使用具有特定尺寸的 .jpg

-我需要放置大约 200 个项目，因此我使用 FlatList 呈现 20 个项目的片段，每个片段都有一个图像。

你有什么解决办法吗？

【问题讨论】：

标签： listview react-native render expo imagebackground

【解决方案1】：

我尝试了一次：https://snack.expo.io/@zvona/correct-positioning

分辨率变化可能需要一些额外的微调，尤其是在比率不同的情况下（当图像发生变换时）。您需要绘制多个背景并根据当前屏幕比例应用它们。

我不会在此处粘贴实际代码，但请随意检查 Snack，然后评估它是否比您当前的实现更有用。

【讨论】：