React Native 之 Flexbox 布局（五）

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值为column（而不是row），alignContent默认值为flex-start（而不是 stretch）, flexShrink 默认值为0 （而不是1）, 而flex只能指定一个数字值。

Flex

flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。

import React from "react";
import { StyleSheet, Text, View } from "react-native";const Flex = () => {return (<View style={[styles.container, {// Try setting `flexDirection` to `"row"`.flexDirection: "column"}]}><View style={{ flex: 1, backgroundColor: "red" }} />  // view 占据整个区域的1/6<View style={{ flex: 2, backgroundColor: "darkorange" }} /><View style={{ flex: 3, backgroundColor: "green" }} /></View>);
};
const styles = StyleSheet.create({container: {flex: 1,padding: 20,},
});export default Flex;

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着**水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)**方向。

  • column（默认值）：将子元素从上到下对齐。如果启用换行，则下一行将从容器顶部的第一个项目右侧开始。
  • row：将子元素从左到右对齐。如果启用换行，则下一行将在容器左侧的第一个项目下方开始。
  • column-reverse：将子元素从底部向上对齐。如果启用换行，则下一行将从容器底部的第一个项目右侧开始。
  • row-reverse：将子元素从右到左对齐。如果启用换行，则下一行将在容器右侧的第一个项目下方开始。
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";const FlexDirectionBasics = () => {const [flexDirection, setflexDirection] = useState("column");return (<PreviewLayoutlabel="flexDirection"values={["column", "row", "row-reverse", "column-reverse"]}selectedValue={flexDirection}setSelectedValue={setflexDirection}><Viewstyle={[styles.box, { backgroundColor: "powderblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "skyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "steelblue" }]}/></PreviewLayout>);
};

Layout Direction

布局方向指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到start和end所指代的边缘。默认情况下，React Native 采用从左到右（LTR）的布局方向进行排列。在这种模式下，start表示左侧，而end表示右侧。

  • LTR（默认值）: 文本和子元素从左到右进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在左侧。
  • RTL: 文本和子元素从右到左进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在右侧。
import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";const DirectionLayout = () => {const [direction, setDirection] = useState("ltr");return (<PreviewLayoutlabel="direction"selectedValue={direction}values={["ltr", "rtl"]}setSelectedValue={setDirection}><Viewstyle={[styles.box, { backgroundColor: "powderblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "skyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "steelblue" }]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value && styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={[styles.container, { [label]: selectedValue }]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",},box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default DirectionLayout;

Justify Content

justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？可用的选项有：

  • flex-start（默认值）将容器中的子元素沿主轴起始位置对齐。
  • flex-end 将容器中的子元素沿主轴末尾位置对齐。
  • center 将容器中的子元素在主轴上居中对齐。
  • space-between 在容器的主轴上均匀分布子元素，将剩余空间平均分配给子元素之间
  • space-around 在容器的主轴上均匀分布子元素，将剩余空间围绕在每个子元素周围。与space-between相比，使用space-around会导致空间被分配到第一个子元素和最后一个子元素之前和之后。
  • space-evenly 在对齐容器内沿着主轴均匀分布子项。每一对相邻项、主开始边缘和第一项以及主结束边缘和最后一项之间的间距都完全相同。
import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";const JustifyContentBasics = () => {const [justifyContent, setJustifyContent] = useState("flex-start");return (<PreviewLayoutlabel="justifyContent"selectedValue={justifyContent}values={["flex-start","flex-end","center","space-between","space-around","space-evenly",]}setSelectedValue={setJustifyContent}><Viewstyle={[styles.box, { backgroundColor: "powderblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "skyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "steelblue" }]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button, selectedValue === value && styles.selected]}><Textstyle={[styles.buttonLabel,selectedValue === value && styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={[styles.container, { [label]: selectedValue }]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",},box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default JustifyContentBasics;

Align Items

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

  • stretch（默认值）：将容器的子元素拉伸以匹配容器次轴的高度。
  • flex-start：将容器的子元素对齐到容器次轴的起始位置。
  • flex-end：将容器的子元素对齐到容器次轴的末尾位置。
  • center：将容器的子元素居中对齐于容器次轴上。
  • baseline：沿着公共基线对齐容器的子元素。可以为各个子元素设置参考基线，作为其父级基线。
import React, { useState } from "react";
import {View,TouchableOpacity,Text,StyleSheet,
} from "react-native";const AlignItemsLayout = () => {const [alignItems, setAlignItems] = useState("stretch");return (<PreviewLayoutlabel="alignItems"selectedValue={alignItems}values={["stretch","flex-start","flex-end","center","baseline",]}setSelectedValue={setAlignItems}><Viewstyle={[styles.box, { backgroundColor: "powderblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "skyblue" }]}/><Viewstyle={[styles.box,{backgroundColor: "steelblue",width: "auto",minWidth: 50,},]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value &&styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><Viewstyle={[styles.container,{ [label]: selectedValue },]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",minHeight: 200,},box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default AlignItemsLayout;

Align Self

alignSelf（布局属性#alignself）与 alignItems 具有相同的选项和效果，但不是影响容器内的子元素，而是可以将此属性应用于单个子元素以更改其在父级中的对齐方式。 alignSelf 会覆盖由父级设置的任何使用 alignItems 的选项。

import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";const AlignSelfLayout = () => {const [alignSelf, setAlignSelf] = useState("stretch");return (<PreviewLayoutlabel="alignSelf"selectedValue={alignSelf}values={["stretch", "flex-start", "flex-end", "center", "baseline"]}setSelectedValue={setAlignSelf}><Viewstyle={[styles.box, {alignSelf,width: "auto",minWidth: 50,backgroundColor: "powderblue",}]}/><Viewstyle={[styles.box, { backgroundColor: "skyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "steelblue" }]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value &&styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={styles.container}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",minHeight: 200,},box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default AlignSelfLayout;

Align Content

alignContent 定义了沿次轴分布行的方式。只有在使用 flexWrap 将项目换行到多个行时才会生效。

  • flex-start（默认值）：将换行后的行与容器的次轴起始位置对齐。
  • flex-end：将换行后的行与容器的次轴末尾位置对齐。
  • stretch（在 Web 上使用 Yoga 时的默认值）：拉伸换行后的行以匹配容器的次轴高度
  • center：将换行后的行居中对齐于容器的次轴。
  • space-between：均匀地在容器的次轴上间隔排列换行后的各个线，使剩余空间平均分布在这些线之间。
  • space-around：均匀地在容器的次轴上间隔排列换行后各个线，使剩余空间平均分布在这些线周围。相较于使用 space-between，使用 space-around 会导致空白区域被分配到第一条线和最后一条线之前及之后两端。
import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";const AlignContentLayout = () => {const [alignContent, setAlignContent] = useState("flex-start");return (<PreviewLayoutlabel="alignContent"selectedValue={alignContent}values={["flex-start","flex-end","stretch","center","space-between","space-around",]}setSelectedValue={setAlignContent}><Viewstyle={[styles.box, { backgroundColor: "orangered" }]}/><Viewstyle={[styles.box, { backgroundColor: "orange" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumseagreen" }]}/><Viewstyle={[styles.box, { backgroundColor: "deepskyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumturquoise" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumslateblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "purple" }]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value &&styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><Viewstyle={[styles.container,{ [label]: selectedValue },]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,flexWrap: "wrap",marginTop: 8,backgroundColor: "aliceblue",maxHeight: 400,},box: {width: 50,height: 80,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default AlignContentLayout;

Flex Wrap

flexWrap属性用于设置容器的换行方式，它控制了当子元素超出容器在主轴上的尺寸时要如何处理。默认情况下，子元素被强制放置在一行中（这可能会使元素被挤压）。如果允许换行，则项目将根据需要沿主轴分为多行。

在换行时，可以使用alignContent来设置这些行在容器中的排列方式。

import React, { useState } from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";const FlexWrapLayout = () => {const [flexWrap, setFlexWrap] = useState("wrap");return (<PreviewLayoutlabel="flexWrap"selectedValue={flexWrap}values={["wrap", "nowrap"]}setSelectedValue={setFlexWrap}><Viewstyle={[styles.box, { backgroundColor: "orangered" }]}/><Viewstyle={[styles.box, { backgroundColor: "orange" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumseagreen" }]}/><Viewstyle={[styles.box, { backgroundColor: "deepskyblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumturquoise" }]}/><Viewstyle={[styles.box, { backgroundColor: "mediumslateblue" }]}/><Viewstyle={[styles.box, { backgroundColor: "purple" }]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value &&styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><Viewstyle={[styles.container,{ [label]: selectedValue },]}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",maxHeight: 400,},box: {width: 50,height: 80,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default FlexWrapLayout;

Flex Basis, Grow, 以及 Shrink

  • flexBasis 是一种独立于轴线的方式，用于提供项目沿主轴的默认大小。如果父容器具有 flexDirection: row，则设置子项的 flexBasis 类似于设置该子项的 width；如果父容器具有 flexDirection: column，则设置子项的 flexBasis 类似于设置该子项的 height。项目的 flexBasis 是在执行任何 flexGrow 和 flexShrink 计算之前该项目的默认大小。
  • flexGrow 描述了在主轴上如何分配容器中剩余空间给其子项。布局完其子项后，容器将根据其子项指定的 flex grow 值来分配任何剩余空间。
  • flexGrow 接受大于等于 0 的任意浮点数值，默认值为 0。容器将按照各个子项的 flex grow 值加权分配剩余空间给它们。
  • flexShrink 描述了当所有子项总尺寸超过主轴上容器尺寸时，在溢出情况下如何收缩各个子项。如果将溢出尺寸视为负剩余空间，则可以认为 flex shrink 和 flex grow 的工作方式非常相似。这两个属性也能很好地配合使用，允许子项根据需要进行伸缩。
  • flexShrink 接受大于等于 0 的任意浮点数值，默认值为 0（在 Web 上，默认值为 1）。容器将按照各个子项的 flex shrink 值加权收缩它们。
import React, { useState } from "react";
import {View,Text,TextInput,StyleSheet,
} from "react-native";const App = () => {const [powderblue, setPowderblue] = useState({flexGrow: 0,flexShrink: 1,flexBasis: "auto",});const [skyblue, setSkyblue] = useState({flexGrow: 1,flexShrink: 0,flexBasis: 100,});const [steelblue, setSteelblue] = useState({flexGrow: 0,flexShrink: 1,flexBasis: 200,});return (<View style={styles.container}><Viewstyle={[styles.container,{flexDirection: "row",alignContent: "space-between",},]}><BoxInfocolor="powderblue"{...powderblue}setStyle={setPowderblue}/><BoxInfocolor="skyblue"{...skyblue}setStyle={setSkyblue}/><BoxInfocolor="steelblue"{...steelblue}setStyle={setSteelblue}/></View><View style={styles.previewContainer}><Viewstyle={[styles.box,{flexBasis: powderblue.flexBasis,flexGrow: powderblue.flexGrow,flexShrink: powderblue.flexShrink,backgroundColor: "powderblue",},]}/><Viewstyle={[styles.box,{flexBasis: skyblue.flexBasis,flexGrow: skyblue.flexGrow,flexShrink: skyblue.flexShrink,backgroundColor: "skyblue",},]}/><Viewstyle={[styles.box,{flexBasis: steelblue.flexBasis,flexGrow: steelblue.flexGrow,flexShrink: steelblue.flexShrink,backgroundColor: "steelblue",},]}/></View></View>);
};const BoxInfo = ({color,flexBasis,flexShrink,setStyle,flexGrow,
}) => (<View style={[styles.row, { flexDirection: "column" }]}><Viewstyle={[styles.boxLabel,{backgroundColor: color,},]}><Textstyle={{color: "#fff",fontWeight: "500",textAlign: "center",}}>Box</Text></View><Text style={styles.label}>flexBasis</Text><TextInputvalue={flexBasis}style={styles.input}onChangeText={(fB) =>setStyle((value) => ({...value,flexBasis: isNaN(parseInt(fB))? "auto": parseInt(fB),}))}/><Text style={styles.label}>flexShrink</Text><TextInputvalue={flexShrink}style={styles.input}onChangeText={(fS) =>setStyle((value) => ({...value,flexShrink: isNaN(parseInt(fS))? "": parseInt(fS),}))}/><Text style={styles.label}>flexGrow</Text><TextInputvalue={flexGrow}style={styles.input}onChangeText={(fG) =>setStyle((value) => ({...value,flexGrow: isNaN(parseInt(fG))? "": parseInt(fG),}))}/></View>
);const styles = StyleSheet.create({container: {flex: 1,paddingHorizontal: 10,},box: {flex: 1,height: 50,width: 50,},boxLabel: {minWidth: 80,padding: 8,borderRadius: 4,marginTop: 8,},label: {marginTop: 6,fontSize: 16,fontWeight: "100",},previewContainer: {flex: 1,flexDirection: "row",backgroundColor: "aliceblue",},row: {flex: 1,flexDirection: "row",flexWrap: "wrap",alignItems: "center",marginBottom: 10,},input: {borderBottomWidth: 1,paddingVertical: 3,width: 50,textAlign: "center",},
});export default App;

Row Gap, Column Gap 以及 Gap

  • rowGap 设置元素行之间的间隙（gutter）大小。
  • columnGap 设置元素列之间的间隙（gutter）大小。
  • gap 设置行和列之间的间隙（gutter）大小。它是 rowGap 和 columnGap 的简写形式。
import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';const RowGapAndColumnGap = () => {const [rowGap, setRowGap] = useState(10);const [columnGap, setColumnGap] = useState(10);return (<PreviewLayoutcolumnGap={columnGap}handleColumnGapChange={setColumnGap}rowGap={rowGap}handleRowGapChange={setRowGap}><View style={[styles.box, styles.box1]} /><View style={[styles.box, styles.box2]} /><View style={[styles.box, styles.box3]} /><View style={[styles.box, styles.box4]} /><View style={[styles.box, styles.box5]} /></PreviewLayout>);
};const PreviewLayout = ({children,handleColumnGapChange,handleRowGapChange,rowGap,columnGap,
}) => (<View style={styles.previewContainer}><View style={styles.inputContainer}><View style={styles.itemsCenter}><Text>Row Gap</Text><TextInputstyle={styles.input}value={rowGap}onChangeText={v => handleRowGapChange(Number(v))}/></View><View style={styles.itemsCenter}><Text>Column Gap</Text><TextInputstyle={styles.input}value={columnGap}onChangeText={v => handleColumnGapChange(Number(v))}/></View></View><View style={[styles.container, {rowGap, columnGap}]}>{children}</View></View>
);const styles = StyleSheet.create({itemsCenter: {alignItems: 'center'},inputContainer: {gap: 4,flexDirection: 'row',justifyContent: 'space-around',},previewContainer: {padding: 10, flex: 1},input: {borderBottomWidth: 1,paddingVertical: 3,width: 50,textAlign: 'center',},container: {flex: 1,marginTop: 8,backgroundColor: 'aliceblue',maxHeight: 400,flexWrap: 'wrap',alignContent: 'flex-start',},box: {width: 50,height: 80,},box1: {backgroundColor: 'orangered',},box2: {backgroundColor: 'orange',},box3: {backgroundColor: 'mediumseagreen',},box4: {backgroundColor: 'deepskyblue',},box5: {backgroundColor: 'mediumturquoise',},
});export default RowGapAndColumnGap;

宽度与高度

width属性指定元素内容区域的宽度。同样，height属性指定元素内容区域的高度。

width和height都可以取以下值：

  • auto（默认值）React Native 根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。
  • pixels以绝对像素定义宽度/高度。根据组件上设置的其他样式，这可能是节点最终尺寸也可能不是。
  • percentage分别以父级宽度或高度的百分比定义宽度或高度。
import React, { useState } from "react";
import {View,SafeAreaView,TouchableOpacity,Text,StyleSheet,
} from "react-native";const WidthHeightBasics = () => {const [widthType, setWidthType] = useState("auto");const [heightType, setHeightType] = useState("auto");return (<PreviewLayoutwidthType={widthType}heightType={heightType}widthValues={["auto", 300, "80%"]}heightValues={["auto", 200, "60%"]}setWidthType={setWidthType}setHeightType={setHeightType}><Viewstyle={{alignSelf: "flex-start",backgroundColor: "aliceblue",height: heightType,width: widthType,padding: 15,}}><Viewstyle={[styles.box,{ backgroundColor: "powderblue" },]}/><Viewstyle={[styles.box,{ backgroundColor: "skyblue" },]}/><Viewstyle={[styles.box,{ backgroundColor: "steelblue" },]}/></View></PreviewLayout>);
};const PreviewLayout = ({children,widthType,heightType,widthValues,heightValues,setWidthType,setHeightType,
}) => (<View style={{ flex: 1, padding: 10 }}><View style={styles.row}><Text style={styles.label}>width </Text>{widthValues.map((value) => (<TouchableOpacitykey={value}onPress={() => setWidthType(value)}style={[styles.button,widthType === value && styles.selected,]}><Textstyle={[styles.buttonLabel,widthType === value && styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={styles.row}><Text style={styles.label}>height </Text>{heightValues.map((value) => (<TouchableOpacitykey={value}onPress={() => setHeightType(value)}style={[styles.button,heightType === value && styles.selected,]}><Textstyle={[styles.buttonLabel,heightType === value && styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View>{children}</View>
);const styles = StyleSheet.create({box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {padding: 8,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginRight: 10,marginBottom: 10,},selected: {backgroundColor: "coral",shadowOpacity: 0,borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default WidthHeightBasics;

绝对与相对定位

position 类型定义了元素在其父元素中的定位方式。

  • relative（默认值） 默认情况下，一个元素是相对定位的。这意味着一个元素根据布局的正常流程进行定位，然后根据 top、right、bottom 和 left 的值进行偏移。该偏移不会影响任何兄弟或父级元素的位置。
  • absolute 绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于 top, right, bottom, 和 ‘left’ 值来确定的。
import React, { useState } from "react";
import {View,SafeAreaView,TouchableOpacity,Text,StyleSheet,
} from "react-native";const PositionLayout = () => {const [position, setPosition] = useState("relative");return (<PreviewLayoutlabel="position"selectedValue={position}values={["relative", "absolute"]}setSelectedValue={setPosition}><Viewstyle={[styles.box,{top: 25,left: 25,position,backgroundColor: "powderblue",},]}/><Viewstyle={[styles.box,{top: 50,left: 50,position,backgroundColor: "skyblue",},]}/><Viewstyle={[styles.box,{top: 75,left: 75,position,backgroundColor: "steelblue",},]}/></PreviewLayout>);
};const PreviewLayout = ({label,children,values,selectedValue,setSelectedValue,
}) => (<View style={{ padding: 10, flex: 1 }}><Text style={styles.label}>{label}</Text><View style={styles.row}>{values.map((value) => (<TouchableOpacitykey={value}onPress={() => setSelectedValue(value)}style={[styles.button,selectedValue === value && styles.selected,]}><Textstyle={[styles.buttonLabel,selectedValue === value &&styles.selectedLabel,]}>{value}</Text></TouchableOpacity>))}</View><View style={styles.container}>{children}</View></View>
);const styles = StyleSheet.create({container: {flex: 1,marginTop: 8,backgroundColor: "aliceblue",minHeight: 200,},box: {width: 50,height: 50,},row: {flexDirection: "row",flexWrap: "wrap",},button: {paddingHorizontal: 8,paddingVertical: 6,borderRadius: 4,backgroundColor: "oldlace",alignSelf: "flex-start",marginHorizontal: "1%",marginBottom: 6,minWidth: "48%",textAlign: "center",},selected: {backgroundColor: "coral",borderWidth: 0,},buttonLabel: {fontSize: 12,fontWeight: "500",color: "coral",},selectedLabel: {color: "white",},label: {textAlign: "center",marginBottom: 10,fontSize: 24,},
});export default PositionLayout;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/13958.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解

[Algorithm][动态规划][路径问题][不同路径][不同路径Ⅱ][珠宝的最高价值]详细讲解

目录 1.不同路径1.题目链接2.算法原理详解3.代码实现 2.不同路径 II1.题目链接2.算法原理详解3.代码实现 3.珠宝的最高价值1.题目链接2.算法原理详解3.代码实现 1.不同路径 1.题目链接 不同路径 2.算法原理详解 思路&#xff1a; 确定状态表示 -> dp[i][j]的含义 走到dp[…
阅读更多...
Excel 多行表头的列转行

Excel 多行表头的列转行

Excel中A3:F6是带表头的典型表格&#xff0c;但上面多了额外的两行表头&#xff1a; ABCDEF1ActualsActualsPlanPlan2FY20FY21FY20FY213CountryOwner1/1/20201/1/20201/1/20201/1/20204FranceRichard100150801605FranceMartin1201401301406FrancePierre501005080 现在要将典型…
阅读更多...
超简单白话文机器学习-朴素贝叶斯算法（含算法讲解，公式全解，手写代码实现，调包实现

超简单白话文机器学习-朴素贝叶斯算法（含算法讲解，公式全解，手写代码实现，调包实现

1. 朴素贝叶斯算法 朴素贝叶斯&#xff08;Naive Bayes&#xff09;算法是一类基于贝叶斯定理的简单而强大的概率分类器&#xff0c;它在假设特征之间相互独立的前提下工作。尽管这种“朴素”的假设在现实中很少成立&#xff0c;但朴素贝叶斯分类器在许多实际应用中表现良好&am…
阅读更多...
5G工业数采网关是什么？天拓四方

5G工业数采网关是什么？天拓四方

随着工业4.0时代的到来&#xff0c;数字化、网络化、智能化成为工业发展的新趋势。在这个过程中&#xff0c;5G工业数采网关作为一种关键设备&#xff0c;发挥着越来越重要的作用。本文将详细解析5G工业数采网关是什么&#xff0c;以及它在工业领域中的应用和重要性。 一、5G工…
阅读更多...
保研面试408复习 5——操作系统（死锁）、计网（TCP和UDP）

保研面试408复习 5——操作系统（死锁）、计网（TCP和UDP）

文章目录 1、操作系统一、死锁的定义、原因和必要条件a.死锁的定义b.死锁的原因c.死锁产生的必要条件 二、如何预防死锁&#xff1f; 2、计算机网络一、TCP和UDP的相同点二、TCP和UDP的区别 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 1、操作系统 一、…
阅读更多...
领域知识 | 智能驾驶安全领域部分常见概论

领域知识 | 智能驾驶安全领域部分常见概论

Hi&#xff0c;早。 最近想买个新能源车&#xff0c;这个车吧相比于之前的内燃车&#xff0c;新能源车与外界的交互多了很多。比如娱乐的第三方应用&#xff0c;OTA升级等应用。 交互带来的便利越多&#xff0c;暴露的风险自然也就越大&#xff0c;相比于手机等消费者终端设备…
阅读更多...
【GDAL】GDAL库学习（C#版本）

【GDAL】GDAL库学习（C#版本）

1.GDAL 2.VS2022配置GDAL环境&#xff08;C#&#xff09; VS2022工具–NuGet包管理器–管理解决方案的NuGet程序包&#xff0c;直接安装GDAL包。 并且直接用应用到当前的控制台程序中。 找一张tiff格式的图片&#xff0c;或者用格式转换网站&#xff1a;https://www.zamzar.c…
阅读更多...
MySQL 字符字段长度设置详解：语法、注意事项和示例

MySQL 字符字段长度设置详解：语法、注意事项和示例

本文将详细介绍在 MySQL 数据库中如何设置字符字段的长度。将介绍字符字段的数据类型、长度限制、语法示例&#xff0c;并提供具体的示例&#xff0c;以正确设置和管理字符字段的长度。 1. MySQL 字符字段长度概述 在 MySQL 中&#xff0c;字符字段是用于存储文本型数据的列。…
阅读更多...
TIMESTAMP之2038年

TIMESTAMP之2038年

TIMESTAMP 数据类型的存储上限。实际上&#xff0c;TIMESTAMP 类型在不同的数据库系统中有着不同的存储上限。 TIMESTAMP占用4个字节、并且查询的时候系统会帮你自动转成&#xff08;Y-m-d H:i:s),可读性强&#xff0c;可读性与可维护性一举两得 但是&#xff01;&#xff01…
阅读更多...
用kimi一键绘制《庆余年》人物关系图谱

用kimi一键绘制《庆余年》人物关系图谱

《庆余年》里面人物关系复杂&#xff0c;如果能画出一个人物关系图谱&#xff0c;可以直观的理解其中人物关系&#xff0c;更好的追剧。 首先&#xff0c;用kimi下载庆余年的分集剧情&#xff0c;常见文章《AI网络爬虫&#xff1a;批量爬取电视猫上面的《庆余年》分集剧情》&am…
阅读更多...
leetcode148-Sort List

leetcode148-Sort List

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 分析 这道题目的思路也比较明确&#xff0c;我们可以用递归排序的思路&#xff0c;先不断拆分链表直到只…
阅读更多...
C++三剑客之std::any(二) : 源码剖析

C++三剑客之std::any(二) : 源码剖析

目录 1.引言 2.std::any的存储分析 3._Any_big_RTTI与_Any_small_RTTI 4.std::any的构造函数 4.1.从std::any构造 4.2.可变参数模板构造函数 4.3.赋值构造与emplace函数 5.reset函数 6._Cast函数 7.make_any模版函数 8.std::any_cast函数 9.总结 1.引言 C三剑客之s…
阅读更多...
C#如何在异步任务中调用及取消一个长时间运行的同步方法

C#如何在异步任务中调用及取消一个长时间运行的同步方法

在.Net和C#中运行异步代码相当简单&#xff0c;因为我们有时候需要取消正在进行的异步操作&#xff0c;通过本文&#xff0c;可以掌握 通过CancellationToken取消任务&#xff08;包括non-cancellable任务&#xff09; using System.Diagnostics;Console.WriteLine("Hell…
阅读更多...
网络编程-day5

网络编程-day5

IO复用select实现TCP服务端 #define IP "192.168.125.196" #define PORT 8888 int main(int argc, const char *argv[]) {int sfd socket(AF_INET, SOCK_STREAM, 0);if(sfd -1){perror("socket");return -1;}int reuse 1;if(setsockopt(sfd, SOL_SOCKE…
阅读更多...
外汇天眼：外汇干预是什么？ 谁来做？ 怎么做？

外汇天眼：外汇干预是什么？ 谁来做？ 怎么做？

日元兑美元汇率持续下跌&#xff0c;市场对外汇干预的警惕性提高。 如果日本政府和日本银行&#xff08;央行&#xff09;进行外汇干预&#xff0c;会是大约1年半以来首次。 日本2022年曾进行过3次干预。 外汇干预由谁来进行&#xff0c;目的是什么&#xff0c;又采取了什么具体…
阅读更多...
工况数据导入MATLAB及数据复用

工况数据导入MATLAB及数据复用

01--数据导入 之前在Matlab/Simulink的一些功能用法笔记&#xff08;二&#xff09;中有介绍过数据的导入到MATLAB工作区间 本次主要是想介绍下数据的复用 我们以NEDC工况数据为例&#xff1a; 通过下列3种方法进行导入&#xff1a; 1.通过导入Excel表数据&#xff0c;使用F…
阅读更多...
Date、LocalDateTime、时间戳、日期字符串互转

Date、LocalDateTime、时间戳、日期字符串互转

前言 由于历史原因&#xff0c;项目上使用Date、LocalDateTime、时间戳甚至日期字符串的情况五花八门&#xff0c;在每次参数传递的时候&#xff0c;遇到类型不一致的时候就会很痛苦&#xff0c;接下来就总结下这些类之间到底怎样互转。 1 From Date Date作为老牌的日期处理…
阅读更多...
番外篇 | YOLOv5更换主干网络之Conformer：首个CNN + Transformer的backbone模型

番外篇 | YOLOv5更换主干网络之Conformer：首个CNN + Transformer的backbone模型

前言：Hello大家好，我是小哥谈。Transformer和CNN在处理视觉表征方面都有着各自的优势以及一些不可避免的问题。因此，国科大、鹏城实验室和华为研究人员首次将二者进行了融合并提出全新的Conformer模型，其可以在不显著增加计算量的前提下显著提升了基网表征能力。论文已被IC…
阅读更多...
Jenkins部署成功后自动发通知到钉钉群

Jenkins部署成功后自动发通知到钉钉群

钉钉上如何配置 选择钉钉群&#xff0c;找到群设置-机器人-添加机器人 选择自定义 选择【添加】 选择【加签】&#xff0c;复制值&#xff0c;后续在jenkins里配置时会用到 复制Webhook地址&#xff0c;后面在jenkins里配置的时候要用到 Jenkins上如何配置 系统管理-插件管…
阅读更多...
“Excel+中文编程”衍生新型软件，WPS用户：自家孩子

“Excel+中文编程”衍生新型软件，WPS用户：自家孩子

你知道吗&#xff0c;我们中国人有时候真的挺有创新精神的。 你可能熟悉Excel表格&#xff0c;也可能听说过中文编程&#xff0c;但你有没有脑洞大开&#xff0c;想过如果把这两者结合起来&#xff0c;会碰撞出什么样的火花呢&#xff1f; 别不信&#xff0c;跟着我来看看吧&a…
阅读更多...
最新文章

Copyright @ 2022~2023