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'
}

在Spinner中

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

在微调器父视图中设置：

justifyContent: 'center',
alignItems:'center'

在微调器中设置：

alignSelf:'center'

Answer 4

垂直居中 ActivityIndicator 组件的正确方法是在 ActivityIndicator 组件本身上使用 '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 };

react-native：在屏幕中央显示微调器

4 个答案: