RN：使用 flexbox 的中心微调器？答案

【问题标题】：RN: Center spinner using flexbox?RN：使用 flexbox 的中心微调器？
【发布时间】：2018-09-09 18:56:39
【问题描述】：

我正在尝试使微调器垂直和水平居中（iOS 和 Android - 目前在 iOS 上测试）。这是我的 JSX

            <View>
                <Spinner/>
            </View>

当然，Spinner 是一个自定义组件，它只是包含一个 ActivityIndicator

const Spinner = ({size}) => {
    return (
        <View style={styles.spinnerStyle}>
            <ActivityIndicator/>
        </View>

    );
};


const styles = {
    spinnerStyle: {
        flex: 1,
        justifyContent : 'center',
        alignItems: 'center'
    }
}
export {Spinner}

微调器可以工作，但它始终位于屏幕顶部，微调器包含一个视图以及我认为应该工作的弹性项目。但是没有

我还尝试添加包含自定义组件的第一个视图的一些样式，即..

            <View style={....}>
                <Spinner/>
            </View>

但没有快乐。

【问题讨论】：

如果你在它的父元素上添加一个边框，它应该居中，你会很快看到它是否是预期的高度......因为它听起来不是。高度是按百分比还是？
另外，你是使用 flex-direction 列还是行？
flexDirection，没有改变所以默认是列，但也尝试了行
我的第一条评论呢？
这是另一个与我发表第一条评论时的想法有关的帖子：stackoverflow.com/questions/33636796/…

标签： react-native flexbox

【解决方案1】：

我想你快到了！唯一缺少的是将flex: 1 设置为<View> 周围的<Spinner /> 组件。

我确实在Expo's Sketch 上创建了一个示例。随意看看它。尝试删除 flex: 1 并添加背景颜色以查看其行为方式。希望对您有所帮助！

import React, { Component } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';

const spinnerStyles = StyleSheet.create({
  spinnerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

class Spinner extends Component {
  render() {
    return (
      <View style={spinnerStyles.spinnerStyle}>
        <ActivityIndicator size="small" />
      </View>
    );
  }
}

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Spinner />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: '#4286f4',
  },
});

【讨论】：