React Native 절대 위치 수평 중심

React Native 절대 위치 수평 중심

---

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={{
      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

참고 URL : https://stackoverflow.com/questions/37317568/react-native-absolute-positioning-horizontal-centre