React Native 中如何使用 Flex 居中组件？答案

【问题标题】：How Center Components Using Flex in React Native?React Native 中如何使用 Flex 居中组件？
【发布时间】：2018-10-02 22:42:34
【问题描述】：

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

我的应用返回此屏幕：

【问题讨论】：

仅供参考，如果您使用更常见的“center”/“centered”而不是“centralized”（特别是在标题中），您可能会更成功地让潜在的回答者理解这个问题。
Ty @CollinD，我换个问题

标签： css reactjs react-native flexbox react-native-android

【解决方案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;

【讨论】：

TLDR：{ alignItems: 'center', justifyContent: 'center' }

【解决方案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'

【讨论】：

我知道@Trento，问题是：alignItems 命令没有按预期工作。 :'(
问题依旧
对不起，你的问题让我很困惑。用alignItems和justifyContent查看最新更新的底部代码sn-p。

【解决方案3】：

如果你想在没有 flex 的情况下这样做，你可以这样做：

<View style={styles.cardContent}>
    //white square 
</View>

// This code is responsible for centering the square box in the picture:
cardContent: {
    marginTop:19,
    height:188,
    width:188,
    backgroundColor:'#FFFFFF',
    justifyContent:'center',
    marginLeft:'auto',
    marginRight:'auto',
}

这将是输出：

【讨论】：

请修复链接

【解决方案4】：

最简单的方法：

    <View style={{jusifyContent: "center", alignItems: "center"}}>
      <Text>I'm an element</Text>
      <Text>I'm another element</Text>
    </View>

【讨论】：

【解决方案5】：

css 属性flex 将让我们更轻松地完成所有对齐操作。你可以使用class="row" 或者可以提供像style={{ display: 'flex, justContent: 'center', alignItems: 'center' 这样的内联样式，这将完美地对齐父 div 中心的所有内容。

<div style={{ display: 'flex', justifyContent: 'center'}}>
    <div>Child1</div>
    <div>Child2</div>
</div>

【讨论】：