React Native绝对定位水平中心

92

似乎position:absolute在使用中某个元素无法使用justifyContent或居中alignItems。有一种解决方法可以使用，marginLeft但即使使用尺寸来检测设备的高度和宽度，也无法在所有设备上显示相同的结果。

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

— 哈森
source

您的元素具有静态宽度还是动态宽度？

— 伊凡·切尔尼赫

249

将您想要的孩子包裹在View中居中，然后将View设为绝对。

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

— 史蒂芬·霍瓦斯
source

28

很有用。对于那些悬挂在StyleSheetobject上的样式参数，有一个不错的捷径...StyleSheet.absoluteFillObject。见github.com/facebook/react-native/blob/master/Libraries/…–

— wkw

2

这不是View占用屏幕上所有可点击的空间吗？例如，如果我在此绝对位置下面有一个组件View，则无法在其上注册点击。

— James111

10

@ James111看来您可以添加pointerEvents='box-none'以通过视图传递触摸：github.com/facebook/react-native/issues/12360

— Stephen Horvath，

如果文本具有背景色，则此方法可恢复整个图像：/

— DevMultiTech

@codewise是的，有一种新方法可以做到，请查看我的答案

— DavidNoreña19年

73

如果您想将一个元素本身居中，则可以使用alignSelf：

logoImg: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: '-5%'
}

这是一个示例（请注意徽标父级是一个具有以下位置的视图：relative）

— 大卫·诺雷娜（DavidNoreña）
source

1

alignSelf对我不起作用（实际上什么也没做）。您可以在代码中添加更多上下文吗？

— 约翰尼·基尔（Johnny Kehr）

1

您需要显示父母：'flex'@ wilc0

— Travis

12

您可以通过为left属性提供设备的宽度除以2并减去要居中宽度的元素的一半，来使绝对项目居中。

例如，您的样式可能看起来像这样。

bottom: {
    position: 'absolute',
    left: (Dimensions.get('window').width / 2) - 25,
    top: height*0.93,
}

— 科里
source

这仅在您事先知道元素宽度的情况下才有效

— Adamski

1

如果您不知道元素没有已知的宽度，则可以使用onLayout来获取元素的宽度

measure(layout) {      const { width } = layout;      this.setState({ width: width }) } ... <View     onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— Corey

5

创建一个全角View，alignItems: "center"然后在其中插入所需的子代。

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

您可以bottom: 30为底部对齐的组件添加属性。

— 马斯博森
source

2

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
  <Text>CENTERD TEXT</Text>
</View>

并添加这个

import {StyleSheet} from 'react-native';

— 马赫迪（Mahdi Bashirpour）
source

简短的仅代码答案通常在Stack Overflow上不受欢迎。为了避免被标记为“低质量”，请考虑添加一些说明性文字。

— 阿德里安·摩尔

1

您可以尝试代码

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>

— 埃里斯·马布（Eris Mabu）
source

哈哈。这对我有用，但是，我们需要添加`style = {{alignItems：'center'，justifyContent：'center'，flexDirection：'row'}}`

— 婴儿

1

真的很简单。对width和left属性使用百分比。例如：

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

无论width是left平等的(100% - width)/2

— 用户名
source