React Native - 页脚按钮答案

【问题标题】：React Native - Footer buttonReact Native - 页脚按钮
【发布时间】：2017-06-16 09:50:18
【问题描述】：

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

查看

<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>

样式

const styles = StyleSheet.create({
  loginButton: {
    alignSelf : 'stretch',
    position: 'absolute',
    bottom:0,
    left:0,
    backgroundColor : '#4990e2',
    borderRadius : 0
  }
});

输出

如何让登录按钮在屏幕底部完全伸展？

PS：我是初学者。

【问题讨论】：

标签： android ios facebook react-native jsx

【解决方案1】：

Content 元素的高度是根据其子元素计算得出的。在您的情况下，它的高度刚好足以包含两个 InputGroup 元素，因为按钮具有“绝对”位置。您需要先找到整个屏幕元素。假设它是 Container 元素。然后在Content 上也使用“绝对”定位： position: "absolute", top: 0, bottom: 0, left: 0, right: 0,

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

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

【讨论】：