如何对flex元素的某些部分进行分组？

Question

我几乎完成了我的React Native视图，但我不确定如何在包含很多内容的页面中对单个项目进行分组。

如何直接在标题下移动详细信息？

查看

    return (
      <View style={s.container}>

            <View style={[s.header, s.flexRow]}>
          <Text style={s.carRegNr}> CV 515632 </Text>
                <Text style={s.insuranceName}> Plus </Text>
        </View>

        <View style={s.flexColumn}>
          <Text style={s.claimNrText}> Claim nr </Text>
          <Text style={s.claimNr}> 020202 </Text>
        </View>

          <View style={s.flexColumn}>
                    <Text style={s.nextSteps}> Next steps </Text>
            <Text style={s.nextStepsDetails}> Goto the repair shop </Text>
                  </View>

          <View style={[s.flexRow, {justifyContent: "flex-end"}]}>
            <CarRepairShop
              name="Best Auto"
              address1="Shiny road 1"
              address2="0101 City"
            />
            <CarRepairShop name="Rental" address1="Rental included"/>
                  </View>

        <GjeButton
          title="Close"
        />

        { /*

        <GjeButton
          title={"Set DamageClaimReceiptNr"}
          onPress={ () => this.props.setDamageClaimReceiptNr("100") }
        />

        <GjeButton
          title={"Add car registration nr"}
          onPress={ () => this.props.setCarRegNr("lkj2") }
        />
        */
        }

      </View>
    )
  }
}

定型

export default StyleSheet.create({
    container: {
        height: 10,
    flex: 1,
    padding: 30,
    flexDirection: "column",
    justifyContent: "flex-start"
    },

    header: {
        justifyContent: "space-between",
    borderColor: colors.grape,
    borderRadius: 2,
    },

    carRegNr: {
        fontWeight: "bold",
    color: colors.black,
    fontSize: 25,
    },

  groupTight: {
    flexDirection: "column",
    flex: 1,
    justifyContent: "flex-start"
  },

    insuranceName: {
    color: colors.black,
        fontSize: 23
    },

    flexRow: {
    flex: 1,
    flexDirection: "row",
        justifyContent: "space-between",
    },

    flexColumn: {
    width: "100%",
    flex: 1,
    flexDirection: "column",
    },

  nextSteps: {
    color: colors.black,
        fontSize: 15,
  },
  nextStepsDetails: {
    color: colors.black,
        fontSize: 7,
  },

    bold: {
    color: colors.black,
        fontWeight: "bold",
    },

    cont: {
        margin: 5,
        padding: 3,
    },

    claimNrText: {
    color: colors.black,
        margin: 0,
        padding: 0,
        fontSize: 30,
    },

    claimNr: {
        fontSize: 26,
    }
})

Answer 1

您只需添加包含标题和详细信息元素的父View元素。

<View>
    <View style={...headerStyles}>
    </View>
    <View style={...detailStyles}>
    </View>
</View>

父视图可以有justifyContent: 'flex-start'

Answer 2

@crispychicken，感谢您建议将项目包装在新的i1 <- DT == 4 DT[i1] <- rep(names(DT), each = nrow(DT))[i1] 标记中。 但是，它并没有使用你的CSS建议。 我在更新我的View样式后得到了它，如此处所示。

<强>式

.container