Question

用户从服务器接收其照明数据。在用户界面中，用户可以与每种照明互动（例如，将其打开和关闭）。所有照明均在一页中呈现。但是，用户希望对它们进行分组。（例如，餐厅照明，花园照明等）。

我从服务器收到的数据看起来像这样（ devEui 是唯一的）：

 [
        {
            "updateTime": 1000,
            "data": {
                "devEui": "0x001werwerwedc2705",
                "State": "OFF",
                "lastSeen": "2019-04-27T07:28:03.814Z"
            }
        },
        {
            "updateTime": 1000,
            "data": {
                "devEui": "0xwerwerwerwrerwer",
                "State": "ON",
                "linkquality": 139,
                "last_seen": "2019-05-04T12:10:02.837Z"
            }
        },
        {
            "updateTime": 1000,
            "data": {
                "devEui": "0x001242342342344dc2700",
                "State": "OFF",
                "lastSeen": "2019-04-27T07:28:03.814Z"
            }
        }
    ]

预期的行为：用户创建一个组（单击添加按钮->为它指定一个唯一名称）->该组将出现作为一个盒子（一个非常简单的 View 组件，上面有一个名称）->用户拖动一个Lighting视图（例如，园艺Lighting）并将其拖放到他已经创建的组（box）上。然后必须将照明渲染到其组内。（用户点击该组->重定向到另一页面->他在那里看到花园的灯光）

服务器将永远不知道分组逻辑，因为它对每个用户都是唯一的。（您可以使用异步存储来知道在后续渲染中将每个照明渲染的位置->收到数据后，必须读取移动设备上的存储->每个照明必须在其自己的组中进行渲染）

我需要在React Native中最简单地实现此逻辑。

React Native中的动态UI分组

0 个答案: