中心组件如何在React Native中使用Flex？

Question

我很难使用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
  }
});

我的应用返回以下屏幕：

Answer 1

完成：

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

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

const styles = StyleSheet.create({
  container: {},
  content: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  },
  form: {
    width: '100%'
  },
  item: {}
});

const Screen = () => (
  <Container style={styles.container}>
    <Content contentContainerStyle={styles.content}>
      <AppLogo />
      <Form style={styles.form}>
        <Item floatingLabel last>
          <Label>Username</Label>
          <Input />
        </Item>
      </Form>
    </Content>
  </Container>
);

export default Screen;

Answer 2

您可能需要花一些时间阅读React Native 文档中的Layout with Flexbox页面；因为这会让您更好地了解如何实现您的目标。

你可以访问我提到的 React Native Flexbox 文档：https ://facebook.github.io/react-native/docs/flexbox.html

在 React Native 中，组件可以使用 flexbox 算法指定其子组件的布局。Flexbox 旨在在不同的屏幕尺寸上提供一致的布局。

无论您是否意识到，您已经使用了一些 Flexbox 的 CSS 样式flex: 1;和alignItems: 'center';.

解决方案

在 React Native 中，Flexbox 的工作方式与 Web 上的相同，只是默认值不同，flexDirection 默认为列而不是行。

出于这个原因，我们可以使用alignItems组件样式的规则来确定子项沿辅助轴（垂直）的对齐方式。

将以下规则添加到您的子元素将导致它们占据全屏宽度；但是，考虑max-width为横向布局和更大的屏幕（例如平板电脑）添加一个：

childSelector {
    alignItems: stretch;
}

要将容器内容水平和垂直居中，请应用以下样式规则：

alignItems: 'center'
justifyContent: 'center'