Question

我有点困惑为什么这个flex不起作用。

 <View
style={{
    display: "flex",
    flexWrap: "wrap"
}}
>
<View style={{ width: "40%", alignSelf: "flex-start" }}>
    <Button BUY</Button>
    <View style={{ alignSelf: "center", marginTop: "2%" }}>// A logo</View>
</View>
<View style={{ width: "40%", alignSelf: "flex-end" }}>
    <AreaChart
        style={{ height: 250 }}
        dataPoints={data}
        contentInset={{ top: 30, bottom: 30 }}
        curve={shape.curveNatural}
        svg={{
            fill: "rgba(134, 65, 244, 0.2)",
            stroke: "rgb(134, 65, 244)"
        }}
    />
</View>
</View>;

我想要的布局是：

BUTTON  |   <CHART
LOGO    |   CHART>

按钮和徽标集中在一起，图表占据了＆＃34;框＆＃34;在右边。

但是，上述标记会产生以下结果：

BUTTON |
LOGO   |
       | CHART
       | CHART

他们正在做正确的事情，但图表从徽标结束处开始。

我在哪里遇到flexbox？如何制作正确的布局？

Answer 1

由于React Native中的默认flexDirection为column，因此弹性项目将垂直堆叠，因此图表会自行呈现。

在第二个孩子alignSelf: "flex-end"上使用View，columns控制横轴（水平），它将正确对齐。

要将它们并排排列，请将flexDirection: "row"添加到父View。

您还可以删除两个孩子alignSelf上的View个属性，除非您想要第二个View（alignSelf: "flex-end"）对齐到底部。

更新了代码示例

<View style={{
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
}}>
    <View style={{width: "40%"}}>
        <Button
            BUY
        </Button>
        <View style={{alignSelf: "center", marginTop: "2%"}}>
            // A logo
        </View>
    </View>
    <View style={{ width: "40%"}}>
        <AreaChart
            style={{height: 250}}
            dataPoints={data}
            contentInset={{top: 30, bottom: 30}}
            curve={shape.curveNatural}
            svg={{
                fill: 'rgba(134, 65, 244, 0.2)',
                stroke: 'rgb(134, 65, 244)',
            }}
        />
    </View>
</View>

React native flexbox如何垂直对齐项目？

1 个答案: