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

— 하센
소스

요소에 정적 너비 또는 동적 요소가 있습니까?

— Ivan Chernykh

251

원하는 자식을 뷰의 중앙에 배치하고 뷰를 절대적으로 만듭니다.

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

— 스티븐 호 바스
소스

28

매우 유용한. StyleSheet객체에 매달려있는 스타일 매개 변수에 대한 멋진 단축키가 있습니다 ...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

— 스티븐 호 바스

텍스트가 배경 색상이있는 경우이 방법은 전체 이미지를 복구 : /

— DevMultiTech

네 @codewise, 그것이 내 대답은 체크 아웃 할 수있는 새로운 방법이

— 데이비드 Noreña의

73

하나의 요소 자체를 중앙에 배치하려면 alignSelf를 사용할 수 있습니다 .

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

이것은 예입니다 (로고 부모는 position : relative 인 뷰입니다 ).

— 데이비드 노 레냐
소스

1

alignSelf는 나를 위해 작동하지 않았습니다 (사실 아무것도하지 않았습니다). 코드에 더 많은 컨텍스트를 추가 할 수 있습니까?

— johnny kehr

1

부모가 표시되어야합니다 : 'flex'@ wilc0

— Travis Delly

12

왼쪽 속성에 장치의 너비를 2로 나눈 값을 제공하고 너비를 가운데로 설정하려는 요소의 절반을 빼서 절대 항목을 가운데에 배치 할 수 있습니다.

예를 들어, 귀하의 스타일은 다음과 같을 수 있습니다.

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

— Corey
소스

이것은 요소 너비를 미리 알고있는 경우에만 작동합니다

— Adamski

1

요소에 알려진 너비가 없는지 모르는 경우 onLayout을 사용하여 요소 너비를 가져올 수 있습니다

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

— Corey

6

전체 너비 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아래쪽 정렬 구성 요소 와 같은 속성을 추가 할 수 있습니다 .

— Masbossun
소스

2

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

그리고 이것을 추가하십시오

import {StyleSheet} from 'react-native';

— Mahdi Bashirpour
소스

짧은 코드 전용 답변은 종종 Stack Overflow에서 눈살을 찌푸립니다. '낮은 품질'로 표시되는 것을 방지하려면 설명 텍스트를 추가하는 것이 좋습니다.

— Adrian Mole

1

코드를 시도해 볼 수 있습니다.

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

— 에리스 마부
소스

ㅋ. 이것은 그러나, 우리는`스타일 = {: '센터', justifyContent '센터', flexDirection : {alignItems '행을'}} 추가 할 필요가 나를 위해 노력`

— babie

1

정말 아주 간단합니다. width및 left속성에 대한 백분율을 사용 합니다. 예를 들면 :

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

무엇이든간에 width,이다 left같음(100% - width)/2

— user11360198
소스