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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何对flex元素的某些部分进行分组?相关的知识,希望对你有一定的参考价值。

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

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

enter image description here观点

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

以上是关于如何对flex元素的某些部分进行分组?的主要内容,如果未能解决你的问题,请参考以下文章

如果某些对象彼此不兼容,如何对对象进行分组和合并?

Div vs Section:如何在 Nav 元素中对元素进行分组

如何对数组中的日期进行分组?

如何根据Jquery中的属性对元素进行分组?

[CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

如何通过对某些列进行分组来重塑数据框