react-native: 在屏幕中央顯示微調器

Question

我想在屏幕中央顯示微調器。我使用了 alignItems、justifyContent 和 flex，但位置沒有變化，然后我使用 margintop 進行正確定位。為什么 alignItems、justifyContent 和 flex 的使用沒有變化？

我在這里使用微調器。

 return (
  <View style={style.spinnerStyle}>
  <Spinner size ="large" />
  </View>
 );
 const style = {
spinnerStyle: {
  flex: 1,
  marginTop:240
}
};

Spinner.js

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

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

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

export { Spinner };

Answer 1

您可以嘗試以下操作：

你在哪里使用 Spinner

spinnerStyle: {
    flex: 1,
    marginTop:240,
    justifyContent: 'center',
    alignItems:'center'
}

在微調器中

spinnerStyle: {
    flex: 1
    alignSelf:'center'
}

Answer 2

const styles = StyleSheet.create({
    spinnerStyle: { 
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
 }
});

Answer 3

我想在屏幕中央顯示微調框。我使用alignItems，justifyContent和flex，但是位置沒有變化，所以我使用margintop進行正確定位。為什么對alignItems，justifyContent和flex的使用沒有變化？

我在這里使用微調器。

 return (
  <View style={style.spinnerStyle}>
  <Spinner size ="large" />
  </View>
 );
 const style = {
spinnerStyle: {
  flex: 1,
  marginTop:240
}
};

Spinner.js

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

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

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

export { Spinner };

Answer 4

將 ActivityIndi​​cator 組件垂直居中的正確方法是在 ActivityIndi​​cator 組件本身上使用 'flex: 1'，而不是在其父組件上。 它不需要包裝器組件，並且根本不需要其他任何 flex 對齊樣式。

OP代碼的改進實現將是：

import React from 'react';
import {ActivityIndicator} from 'react-native';

const Spinner = ({size}) => {
  return (
    <ActivityIndicator size={size || 'large'} style={{ flex: 1 }}/>
  );
 };

export { Spinner };

Answer 5

在微調父視圖中設置：

justifyContent: 'center',
alignItems:'center'

在微調組中：

alignSelf:'center'