我有点困惑为什么这个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 时哪里出错了?如何得出正确的布局?