React Native - 页脚按钮

Question

我正在使用React Native开发我的Native Base应用。我有一个简单的登录表单如下。

查看

WHERE t1.`model` = t2.`old_model`
AND t1.`vendor_id` = 53

样式

<Container>
    <Content>
        <InputGroup>
            <Icon name="ios-person" style={{ color: '#969696' }} />
            <Input placeholder="Email" autoFocus={ true} style={{ color: '#4b4b4b' }} />
        </InputGroup>
        <InputGroup>
            <Icon name="ios-unlock" style={{ color: '#969696' }} />
            <Input placeholder="Password" secureTextEntry style={{ color: '#4b4b4b' }} />
        </InputGroup>
        <Button style={ styles.loginButton}>
            Login
        </Button>
    </Content>
</Container>

输出

如何让屏幕底部的登录按钮完全拉伸？

PS：我是初学者。

Answer 1

Content元素的高度是根据它的子元素计算的。在你的情况下，它只有足够的高度来包含两个InputGroup元素，因为按钮具有“绝对”位置。您需要先找到整个屏幕元素。让我们说它是Container元素。然后在Content上使用“绝对”定位： position: "absolute", top: 0, bottom: 0, left: 0, right: 0,

这样就覆盖了整个屏幕。然后在你的按钮元素上： position: "absolute", bottom: 0, left: 0, right: 0

我认为alignSelf不适用于绝对定位。