[position] React Native 절대 위치 수평 중심

Program / 글쓴이

position:absolute사용 중에는 justifyContent또는 을 사용하여 요소를 중앙에 배치 할 수없는 것 같습니다 alignItems. 사용할 해결 방법이 marginLeft있지만 장치의 높이와 너비를 감지하는 차원을 사용하더라도 모든 장치에 대해 동일하게 표시되지는 않습니다.

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

답변

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

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

답변

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

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

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

여기에 이미지 설명 입력

답변

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

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

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

답변

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

답변

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

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

import {StyleSheet} from 'react-native';

답변

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

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

답변

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

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

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