Как разработать интерфейс на основе схемы в React и ReactNative

Question

Каков наилучший подход к разработке интерфейса на основе схемы? Есть ли готовые к использованию фреймворки для того же?

В настоящее время я разработал синтаксический анализатор, который будет анализировать схему, как определено ниже, и он будет создавать компоненты динамически, так как он рекурсивно пересекает схему.

Но мы должны разработать аналогичный пользовательский интерфейс для мобильных устройств, используя ту же схему в программе native.

Существует ли какая-либо инфраструктура в React и ReactNative, которая генерирует компоненты пользовательского интерфейса для данной схемы.

Я ищу каркас, который будет создавать макеты (строки / столбцы) и компоненты (MaterialUI) в макете для заданной схемы гораздо более эффективным способом.

Схема означает объект JSON, полученный с сервера, который содержит определение всей страницы.

Пример: в схеме, приведенной ниже, на странице много карточек, каждая карточка имеет много строк / столбцов, строки и столбцы могут быть вложены на любом уровне, каждая строка и столбец могут иметь много полей (текст, изображение, средство выбора даты и т. Д.)

{
  "_id": "",
  "templateId": 1,
  "name": "simpleTemplate",
  "previewImage": "",
  "previewData": "",
  "backgroundImage": "",
  "collapsible": false,
  "style": "",
  "cards": [
    {
      "_id": "",
      "cardId": 1,
      "name": "HeaderCard",
      "collapsible": false,
      "bottomSeperator": true,
      "layout": {
        "columns": [

        ],
        "rows": [
          {
            "layout": {
              "columns": [
                {
                  "weight": {
                    "xs": "",
                    "md": "",
                    "sm": "2",
                    "lg": "3"
                  },
                  "cols": {
                    "xs": "",
                    "md": "",
                    "sm": "2",
                    "lg": "3"
                  },
                  "id": "R1C1"
                },
                {
                  "layout": {
                    "rows": [
                      {
                        "id": "R1C2R1"
                      },
                      {
                        "id": "R1C2R2"
                      }
                    ]
                  },
                  "weight": {
                    "xs": "",
                    "md": "",
                    "sm": "2",
                    "lg": "3"
                  },
                  "cols": {
                    "xs": "",
                    "md": "",
                    "sm": "2",
                    "lg": "3"
                  },
                  "id": "R1C2"
                }
              ]
            },
            "id": "R1"
          }
        ]
      },
      "style": {
        "alignment": "",
        "backgroundColor": "white",
        "fontFace": "",
        "fontSize": "22px",
        "fontWeight": "",
        "fontColor": "",
        "borderBottomStyle": "solid",
        "borderWidth": "1px"
      },
      "fields": {
        "R1C2R2": {
          "_id": "",
          "fieldId": 3,
          "name": "tagLine",
          "type": "text",
          "layout": {
            "position": "R1C2R2"
          },
          "style": {
            "width": null,
            "height": null,
            "alignment": "",
            "paddingLeft": null,
            "paddingRight": null,
            "paddingBottom": null,
            "paddingTop": null,
            "fontFamily": "Times New Roman",
            "fontSize": "16px",
            "fontWeight": 500,
            "fontColor": "",
            "tagAlignment": ""
          }
        }
      }
    }
  ]
}

Было бы замечательно, если бы одна и та же структура работала как для React, так и для ReactNative. Существует много библиотек динамического размещения, но ни одна из них не основана на схемах. Я исследовал следующие библиотеки (модули npm)

1. реагируют динамический макет
2. реагируют-макет
3. reflexbox
4. autoresponsive реагируют
5. реагируют сетки-макет
6. реагирует-динамическую-форму
7. сплетение-форма
8. реагировать-студия