如何在 React Native 中垂直居中表单

Question

我想垂直对齐表格。

从 'react' 导入 React, { Component }; 从 'native-base' 导入 { 容器、标题、内容、表单、项目、输入、按钮、文本 }；从'react-native'导入{StyleSheet}；

export default class FormExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Form style={styles.container}>
                        <Item>
                            <Input placeholder="Email" />
                        </Item>
                        <Item last>
                            <Input placeholder="Password" />
                        </Item>
                        <Button block>
                            <Text>Submit</Text>
                        </Button>
                    </Form>
                </Content>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        margin: 25,
        alignItems: "center"
    }

});

我的应用程序看起来像这样。

Answer 1

这是您需要添加到内容道具中的行

contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>

<Container>
                <Content
contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
                    <Form style={styles.container}>
                        <Item>
                            <Input placeholder="Email" />
                        </Item>
                        <Item last>
                            <Input placeholder="Password" />
                        </Item>
                        <Button block>
                            <Text>Submit</Text>
                        </Button>
                    </Form>
                </Content>
            </Container>
        );