Flexbox flex-start在flex容器中不起作用

Question

我是Flexbox的新手，主要使用this tutorial在线阅读了很多有关它的信息。目前，我正在尝试在本机应用程序上做一些非常简单的事情，但失败了。在发布此问题之前，我已经尝试了多个小时，并且已经用尽了所有想法。希望有人能够提供帮助。

所需效果

参考下面的图片，我希望红色框（我的徽标）与页面顶部对齐并水平居中，并希望绿色框在中心垂直和水平对齐。我不希望我的徽标将绿色框向下推。徽标只需要填满高度，直到绿色框。我的徽标是SVG，将根据高度自动缩放其大小。

这是我的尝试

 <View
        style={[
            {
                display: 'flex',
                width: '100%',
                height: '100%',
                backgroundColor: Colour.white,
                justifyContent: 'center',
            },
        ]}>
        <Logo style={{ flex: 1, alignSelf: 'flex-start', alignContent: 'center' }} />
        <Card
            containerStyle={{
                width: '85%',
                alignSelf: 'center',
                backgroundColor: Colour.white,
            }}>
            <Input placeholder="USERNAME" containerStyle={LoginStyles.usernameInput} />
            <Input preset="password" placeholder="PASSWORD" />
            <Text preset="link" style={LoginStyles.resetPasswordText}>
                RESET PASSWORD
            </Text>
        </Card>
    </View>

但是在我的实现中，它根本无法工作，好像我可以水平对齐组件，但是徽标没有出现在视图的顶部，并且直到卡片布局反而将其推入卡片后才填充向下查看并居中。我在某个地方阅读了flex方向，默认情况下，react native是column

真的希望有人能提供帮助！浪费了很多时间来尝试执行此操作

Answer 1

我不确定，因为这是未经测试的代码，但是如果您将卡设置为flex:2，徽标设置为flex:1，那么如果将屏幕分成3个，而卡将占用2个，将会发生什么情况？ 3个“空格”可用！因此它将位于中间，您的徽标将占据顶部的1个“空格”

 <View
    style={[
        {
            display: 'flex',
            width: '100%',
            height: '100%',
            backgroundColor: Colour.white,
            justifyContent: 'center',
        },
    ]}>
    <Logo style={{ flex: 1, alignSelf: 'flex-start', alignContent: 'center' }} />
    <Card
        containerStyle={{
            flex: 2,
            width: '85%',
            alignSelf: 'center',
            backgroundColor: Colour.white,
        }}>
        <Input placeholder="USERNAME" containerStyle={LoginStyles.usernameInput} />
        <Input preset="password" placeholder="PASSWORD" />
        <Text preset="link" style={LoginStyles.resetPasswordText}>
            RESET PASSWORD
        </Text>
    </Card>
</View>

再次，...我还没有测试代码，但理论上应该可以工作