Question

我试图让旋转器垂直和水平居中（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以及我认为应该工作的弹性项目。但它没有

我还尝试添加第一个包含自定义组件的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',
  },
});

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

1 个答案: