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

Posted 2021-04-21

我差不多完成了我的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,
    }
})

答案

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

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

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

另一答案

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