在 React Native 和 Flexbox 中垂直居中组件答案

【问题标题】：Centering component vertically in React Native and Flexbox在 React Native 和 Flexbox 中垂直居中组件
【发布时间】：2018-03-14 13:07:51
【问题描述】：

我有以下 React 组件，它有一个水平对齐的图像列表，我想居中。

import React, { Component } from 'react';
import List from './src/List';
var items = require('./assets/shopping.json');

import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={ styles.container } >
        <List
          style = { listStyles.container }
          items={items}
          align-items="center"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#000000',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  }
});

const listStyles = StyleSheet.create({
  container:  {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    maxHeight: '60%',
    display: 'flex',
    backgroundColor: '#FFFF00',
  }
});



AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

但是，List 组件不是垂直对齐的：

列表有一个黄色背景，没有出现在屏幕截图中。这表明它完全被图像和文本覆盖。但是，它们不是垂直居中的。

我在网上搜索了不同的地方，例如here，我合并了建议，但列表组件仍然没有居中。

那么我怎样才能确保 List 组件（及其包含的文本和图像）垂直居中？

【问题讨论】：

尝试在图像上设置 alignSelf: 'center'
我基本上把alignSelf: 'center'放在所有组件中，但仍然没有区别。
尝试将 flexDirection 更改为“列”

标签： android css react-native flexbox

【解决方案1】：

我只是从这个答案here借用这个答案

确保您定义了 flex 和正确的 props 以使项目居中。

你可以试试这个demo 作为你的例子吗？如果它不起作用，您可以在 dabbott 上在线构建一个示例吗？

【讨论】：