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

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>

按钮和徽标一起居中，图表占据右侧的两个“框”。

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

BUTTON |
LOGO   |
       | CHART
       | CHART

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

我用 flexbox 哪里出错了？如何制作正确的布局？

Answer 1

由于flexDirectionReact Native 中的默认值是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>