React native RN：使用flexbox的中心微调器？

我正试图成为垂直和水平居中的微调器（iOS和Android——目前正在iOS上测试）。这是我的JSX

            <View>
                <Spinner/>
            </View>

当然，微调器是一个自定义组件，它只是一个包含ActivityIndicator的组件

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

    );
};


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

const微调器=（{size}）=>{
返回(
);
};
常量样式={
喷丝头样式：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
}
}
导出{微调器}

微调器可以工作，但它总是在屏幕的顶部，微调器包含一个视图以及我认为应该可以工作的flex项。但事实并非如此

我还尝试添加了保存自定义组件的第一个视图的一些样式

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

---

但是没有快乐。

我想你就快到了！唯一缺少的是将

组件周围的

设置为

flex:1

我确实在上创建了一个示例。请随便看看。尝试删除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',
  },
});

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，ActivityIndicator}；
const spinnerStyles=样式表.create({
喷丝头样式：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
});
类微调器扩展组件{
render（）{
返回(
);
}
}
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
//背景颜色：“#4286f4”，
},
});

如果在其父对象上添加一个边框（该边框应居中），您将很快看到它是否与预期高度一致。。。听起来不是这样。高度是以百分比设置的还是？另外，您使用的是“灵活方向”列还是行？灵活方向未更改，因此默认值为“列”，但也尝试了“行”？我的第一条评论如何？下面是另一篇与我发布第一条评论时的想法相关的帖子：