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

Posted 2023-03-06

【中文标题】React Native 中如何使用 Flex 居中组件？

【英文标题】：How Center Components Using Flex in React Native?

【发布时间】：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，我换个问题

【参考方案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>