React Native - 页脚按钮

Question

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

查看

<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 : 我是初学者

Answer 1

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

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

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

React Native - 页脚按钮

React Native - Footer button

android

facebook

jsx

ios

react-native