React native 移动应用程序一次返回两个游戏引擎？将游戏引擎合并到另一个游戏引擎？

我想做一个游戏，你用手指控制一个点，屏幕上有块东西掉下来，你把它们收集起来 问题：我可以看到框落下，屏幕上的点我不能移动点，当我拿走掉的块时，我可以移动点

 class GameScreen extends PureComponent {

constructor(){
    super();
}

  render() {
  return (      
  <Falling/>,
  <Testdot/>                     
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FFF"
}
});

class Testdot extends PureComponent {

constructor(){
    super();
}

render() {
return (

  <GameEngine
    systems={[MoveFinger]} // We can add as many systems as needed
    entities={{
      1: { position: [165,  450], renderer: <Finger/>} }}>
    <StatusBar hidden={true} />    
    </GameEngine>

);
}
}

class Falling extends React.Component {

        constructor(props){
        super(props);

    this.gameEngine = null;
    this.entities = this.setupWorld();
}

setupWorld = () => {

    let engine = Matter.Engine.create({ enableSleeping: false });
    let world = engine.world;

    let box = Matter.Bodies.rectangle(Constants.MAX_WIDTH / 4, Constants.MAX_HEIGHT / 2, 50, 90);

    Matter.World.add(world, [box]);

    return{
      physics: { engine: engine, world: world },
      box: { body: box, size: [40,90], color: 'green', renderer: Box }
    }
}

render(){
  return (

      <GameEngine
          ref={(ref) => { this.gameEngine = ref; }}
          systems={[Physics]}
          entities={this.entities} />

      );
    }
  }

我试着在一次返回中创建两个游戏引擎，我只能看到位于顶部的游戏引擎，几乎就像点的屏幕重叠在块上，而你看不到它——这可能是因为样式表（只是一个想法）

我尝试将类导入到for the dot中，那时我可以同时看到这两个点，但我无法移动该点

 class GameScreen extends PureComponent {

constructor(){
    super();
}

  render() {
  return (      
  <Falling/>,
  <Testdot/>                     
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#FFF"
}
});

class Testdot extends PureComponent {

constructor(){
    super();
}

render() {
return (

  <GameEngine
    systems={[MoveFinger]} // We can add as many systems as needed
    entities={{
      1: { position: [165,  450], renderer: <Finger/>} }}>
    <StatusBar hidden={true} />    
    </GameEngine>

);
}
}

class Falling extends React.Component {

        constructor(props){
        super(props);

    this.gameEngine = null;
    this.entities = this.setupWorld();
}

setupWorld = () => {

    let engine = Matter.Engine.create({ enableSleeping: false });
    let world = engine.world;

    let box = Matter.Bodies.rectangle(Constants.MAX_WIDTH / 4, Constants.MAX_HEIGHT / 2, 50, 90);

    Matter.World.add(world, [box]);

    return{
      physics: { engine: engine, world: world },
      box: { body: box, size: [40,90], color: 'green', renderer: Box }
    }
}

render(){
  return (

      <GameEngine
          ref={(ref) => { this.gameEngine = ref; }}
          systems={[Physics]}
          entities={this.entities} />

      );
    }
  }

class GameScreen扩展了PureComponent{
构造函数（）{
超级（）；
}
render（）{
报税表（
,
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“FFF”
}
});
类Testdot扩展了PureComponent{
构造函数（）{
超级（）；
}
render（）{
返回(
);
}
}
类。组件{
建造师（道具）{
超级（道具）；
this.gameEngine=null；
this.entities=this.setupWorld（）；
}
setupWorld=（）=>{
让engine=Matter.engine.create（{enableslinging:false}）；
让世界=引擎世界；
长方体=物质.物体.矩形（常数.MAX_宽度/4，常数.MAX_高度/2,50,90）；
Matter.World.add（World，[box]）；
返回{
物理：{引擎：引擎，世界：世界}，
框：{body:box，大小：[40,90]，颜色：'green'，渲染器：box}
}
}
render（）{
返回(
{this.gameEngine=ref；}}
系统={[物理]}
实体={this.entities}/>
);
}
}

---

我希望能够在屏幕上同时移动落块和圆的圆点，但当两者都在屏幕上时，我无法移动圆点

为什么要使用两个游戏引擎？我认为，它会正常工作，你应该使用一个游戏引擎，这是可能的。当我使用一个游戏引擎时，只有一个类显示。例如，如果我在一个游戏引擎中使用圆圈类和方块类，顶部的总是显示，下面的不显示，（测试块将显示，因为它是第一个，如果我将下降放在它之前，那么下降将显示，而不是TestDot这是我当前的零食。如果有人需要查看正在发生的事情，请查看整个项目。）