react-native - RN : Center spinner using flexbox?

Question

我试图让旋转器垂直和水平居中(iOS 和 Android - 目前在 iOS 上测试)。这是我的 JSX

            <View>
                <Spinner/>
            </View>

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

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

    );
};


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

微调器可以工作，但它始终位于屏幕顶部，微调器包含一个 View 以及我认为应该起作用的弹性项目。但事实并非如此

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

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

但没有喜悦。

Answer 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',
  },
});