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

【问题标题】：How do I group some parts of flex elements?如何对 flex 元素的某些部分进行分组？
【发布时间】：2018-03-05 16:50:50
【问题描述】：

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

如何将Details直接移动到Header下？

查看

    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,
    }
})

【问题讨论】：

标签： reactjs react-native flexbox

【解决方案1】：

您可以添加一个父View 元素，该元素包含 Header 和 Details 元素。

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

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

【讨论】：

【解决方案2】：

@crispychicken，感谢您建议将项目包装在新的 View 标记中。不过，它不适用于您的 CSS 建议。在更新我的 .container 样式后，我得到了它的工作，如下所示。

风格

import { colors } from "./colors"
import { fonts } from "./fonts"
import { StyleSheet } from "react-native"

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

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

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

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

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

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

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

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

  nextStepsDetails: {
    color: colors.black,
    fontSize: 20,
  },

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

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

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

  claimNr: {
    fontSize: 26,
  }
})

【讨论】：