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
  }
});

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

原文由 FabianoLothor 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;

原文由 FabianoLothor 发布，翻译遵循 CC BY-SA 3.0 许可协议

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'

原文由 Trent 发布，翻译遵循 CC BY-SA 3.0 许可协议