简单的游戏应用程序：React Native - 如何使用可点击的对象实现网格？

Question

我想在react native中构建一个类似于forestapp.cc的网格

我们的想法是使用静态背景并将图像叠加到网格中，方式如下：

<View style={styles.container}>
  <View style = {styles.backgroundContainer}>
    <Image source = {require('./img/background.jpg')} resizeMode = 'cover' style = {styles.backdrop} />
  </View>
  <View style = {styles.overlay}>
    <Image style = {styles.object1} source = {require('./img/objectA.png')} />
  </View>
  <View style = {styles.overlay}>
    <Image style = {styles.object2} source = {require('./img/objectB.png')} />
  </View>
</View>

var styles = StyleSheet.create({
  backgroundContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  container: {
    flex: 1,
    alignItems: 'center',
  },
  overlay: {
    opacity: 0.5,
    backgroundColor: '#000000'
  },
  object1: {
    position: 'absolute',
    top: 10,
    left: 60,
    width: 30,
    height: 52
  },
  object2 {
    position: 'absolute',
    top: 10,
    left: 90,
    width: 30,
    height: 50
  },
  backdrop: {
    flex:1,
    flexDirection: 'column'
  },
});

来自forestapp.cc的类似网格：

我的网格概念（并非所有字段都将被对象占用）

我的问题：

我现在的问题是：

1. 如何处理手机上的不同屏幕尺寸，以便每个人的网格看起来都一样？

2. 当用户将屏幕滑动到例如，如何在左侧和右侧添加幻灯片以扩展网格并同步移动背景图像和所有对象右边？

3. 是＃2。 （同步滑动）当对象是JSON动画（来自lottie）时也可以吗？

4. 如何实现动画动物，使其始终具有正确的z-index，并且根据动物的位置隐藏或不被正确的物体覆盖？