React Native 绝对定位水平居中答案

【问题标题】：React Native absolute positioning horizontal centreReact Native 绝对定位水平居中
【发布时间】：2016-09-16 00:00:05
【问题描述】：

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

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

【问题讨论】：

你的元素是静态宽度还是动态宽度？

标签： position react-native flexbox absolute

【解决方案1】：

将您想要居中的子项包裹在 View 中，并使 View 成为绝对视图。

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

【讨论】：

非常有用。挂在StyleSheet 对象上的那些样式参数有一个很好的快捷方式：...StyleSheet.absoluteFillObject。见github.com/facebook/react-native/blob/master/Libraries/…
这不会让View 占据屏幕上所有可点击的空间吗？例如，如果我在这个绝对定位的 View 下有一个组件，我将无法注册它的点击。
@James111 看来您可以添加pointerEvents='box-none' 以通过视图传递触摸：github.com/facebook/react-native/issues/12360
如果文本有背景色，此方法恢复整个图像：/
@codewise 是的，有一种新方法可以做到这一点，看看我的回答

【解决方案2】：

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

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

这是一个示例（注意，徽标父级是具有 position: relative 的视图）

【讨论】：

alignSelf 对我不起作用（实际上它什么也没做）。你能在代码中添加更多上下文吗？
您需要显示父级：'flex' @wilc0
也适用于：<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}> <Text>Centered text</Text> </View>
alignSelf 对我来说工作得很好，底部：-5 不需要。
-5 因为作为示例发布的图像，我希望我的圈子“在两种布局之间浮动:) @LalitSharma

【解决方案3】：

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

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

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

【讨论】：

这只有在你事先知道元素宽度的情况下才有效
如果您不知道元素没有已知宽度，您可以使用 onLayout 获取元素宽度measure(layout) { const { width } = layout; this.setState({ width: width }) } ... <View onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

【解决方案4】：

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

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 的属性。

【讨论】：

这必须被接受为正确答案，这几乎适用于所有情况。

【解决方案5】：

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

然后添加这个

import {StyleSheet} from 'react-native';

【讨论】：

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

【解决方案6】：

你可以试试代码

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

【讨论】：

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

【解决方案7】：

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

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

无论width 是什么，left 等于 (100% - width)/2

【讨论】：

【解决方案8】：

好吧，我会用这种方式来居中绝对视图

  <View style={{ position: 'absolute', left: '50%', marginLeft: -22 }}>
           <View style={{ position: 'absolute', width: 44, height: 44}}>
             <Ionicons name="close" color="#4775f2" size={32} />
           </View>
   </View>

请注意，在包装我正在使用的图标容器的视图中 left: 50% 和 marginLeft 是特殊的，因为您需要将子项的中间宽度正好放在一个负值上，在这种情况下为 44 为你可以在上面看到，就是这样

【讨论】：