从数组中获取项时如何使其位置静态不变？

Question

目前我有一个数组，如下所示：

const HeaderData = [
  {
    mainData: [
      {
        title: "创建日期",
        detail: "4/1/2021",
      },
      {
        title: "创建者",
        detail: "Jennifer. 0",
      },
      {
        title: "开始时间",
        detail: "4/1/2021",
      },
      {
        title: "完成状态",
        detail: "进行中",
      },
    ],
  },
  {
    activityName: [
      {
        title: "爬楼梯",
        notSatisfied: 5,
        neutral: 0,
        satisfied: 2,
      },
      {
        title: "5组仰卧起坐",
        notSatisfied: 3,
        neutral: 2,
        satisfied: 5,
      },
      {
        title: "3组俯卧撑",
        notSatisfied: 7,
        neutral: 3,
        satisfied: 1,
      },
      {
        title: "举重训练",
        notSatisfied: 3,
        neutral: 2,
        satisfied: 0,
      },
    ],
  },
]

我需要获取数据以获得如下所示的内容：

但是，我只有这些项目：

以下是代码：

        <View>
            {HeaderData.filter((elm) => elm.activityName).map((item, key) => (
              <View key={key} row centerV>
                <View>
                  {item.activityName.map((itemD, key) => (
                    <View key={key} row centerV>
                      <View padding-10>
                        <Text preset="h4">{itemD.title}</Text>
                        <Text preset="h6" style={{ color: color.primary }} >About>> </Text>
                      </View>
                      <View key={key} >
                        <Text preset="h4">{itemD.notSatisfied}</Text>
                      </View>
                    </View>
                  ))}
                </View>

              </View>
            ))}
          </View>

我尝试将数字放在外部，但问题是我不知道如何使数字与文本匹配，即数字将出现在文本的同一行上，但我得到了这个：

** 那么，如何使数字与文本在同一行上并且它们在同一行？**