Reactnative React Native 中如何使用 Flex 居中组件

我很难使用CSS将我的组件集中在屏幕上.

见我的App.js:

import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';

import Screen from './ScreenContainer';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FF6666',
    flex: 1
  }
});

const App = () => (
  <Provider store={store}>
    <Container style={styles.container}>
      <Screen />
    </Container>
  </Provider>
);

export default App;

现在，看看我的ScreenContainer.js

import { Container, Content, Form, Input, Label, Item } from 'native-base';
import React from 'react';

import AppLogo from '../components/AppLogo';

const Screen = () => (
  <Container>
    <Content>
      <AppLogo />
      <Form>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;

此代码导致出现此屏幕:

但是，我希望屏幕保持这种格式:

当我更改代码时:

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#FF6666',
    flex: 1
  }
});

我的应用程序返回此屏幕: