从数组获取时如何使项位置保持静态

Question

目前，我有这样一个数组

const HeaderData = [
  {
    mainData: [
      {
        title: "Created On",
        detail: "4/1/2021",
      },
      {
        title: "Created By",
        detail: "Jennifer. 0",
      },
      {
        title: "Started",
        detail: "4/1/2021",
      },
      {
        title: "Completed",
        detail: "In progress",
      },
    ],
  },
  {
    activityName: [
      {
        title: "Take the stairs",
        notSatisfied: 5,
        neutral: 0,
        satisfied: 2,
      },
      {
        title: "5 Sets of Sit-Ups",
        notSatisfied: 3,
        neutral: 2,
        satisfied: 5,
      },
      {
        title: "3 sets of Push-Up",
        notSatisfied: 7,
        neutral: 3,
        satisfied: 1,
      },
      {
        title: "Weight-lifting",
        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>

我试着把数字放在外面，但问题是我不知道如何使数字匹配文本，平均数字将是同一行文本，但我得到了这个

​

因此，如何使数字与文本相同，并且它们位于同一行？

Answer 1

您可以使用下面的内容。最关键的部分是创建“装箱”视图字段，并将flexDirection: "row"用于您希望水平表示的元素。

JSX

<View style={styles.container}>
  {HeaderData.filter((elm) => elm.activityName).map((item, key) => (
    item.activityName.map((itemD, key) => (
      // The main container to hold "each" item. Important to set "flexDirection: 'row'" 
      <View key={key} style={styles.itemContainer}>
        {/* LEFT_SIDE View for the item titles and 'About' text. Set "flexDirection: 'column'", which is the default.  */}
        <View style={styles.itemLabelContainer}>
          <Text style={styles.itemTitle}>{itemD.title}</Text>
          <Text style={styles.about}>
            About>> 
          </Text>
        </View>
        {/* RIGHT_SIDE View for the item values. Again, set "flexDirection: 'row'" since the values are presented horizontally. */}
        <View style={styles.itemValueContainer}>
          <Text style={styles.itemValue}>{itemD.notSatisfied}</Text>
          <Text style={styles.itemValue}>{itemD.neutral}</Text>
          <Text style={styles.itemValue}>{itemD.satisfied}</Text>
        </View>
      </View>
    ))
  ))}
</View>

样式

const styles = StyleSheet.create({
  itemContainer: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingVertical: 12,
    justifyContent: 'space-between',
  },
  itemTitle: {
    fontWeight: 'bold'
  },
  about: {
    color: 'blue',
    paddingVertical: 4,
  },
  itemLabelContainer: {
    flexDirection: 'column',
    marginRight: 20,
  },
  itemValueContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemValue: {
    paddingHorizontal: 4,
    textAlignVertical: 'center',
  },

  container: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});