React Native định vị tuyệt đối trung tâm ngang

Có vẻ như với position:absoluteviệc sử dụng một phần tử không thể được căn giữa bằng cách sử dụng justifyContenthoặc alignItems. Có một giải pháp để sử dụng marginLeftnhưng không hiển thị giống nhau cho tất cả các thiết bị, ngay cả khi sử dụng kích thước để phát hiện chiều cao và chiều rộng của thiết bị.

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

Đặt con bạn muốn làm trung tâm trong một Chế độ xem và đặt Chế độ xem tuyệt đối.

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

Nếu bạn muốn căn giữa một phần tử, bạn có thể sử dụng alignSelf :

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

Đây là một ví dụ (Lưu ý biểu tượng cha là một dạng xem có vị trí: tương đối )

Bạn có thể căn giữa các mục tuyệt đối bằng cách cung cấp thuộc tính bên trái với chiều rộng của thiết bị chia cho hai và trừ đi một nửa chiều rộng của phần tử bạn muốn căn giữa.

Ví dụ: phong cách của bạn có thể trông giống như thế này.

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

tạo ra một toàn chiều rộng Viewvới alignItems: "center"trẻ em sau đó chèn mong muốn bên trong.

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>    
    )
  }
}

bạn có thể thêm các thuộc tính như bottom: 30cho thành phần được căn chỉnh dưới cùng.

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

Và thêm cái này

import {StyleSheet} from 'react-native';

Bạn có thể thử mã

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

Nó thực sự rất đơn giản. Sử dụng phần trăm cho widthvà leftthuộc tính. Ví dụ:

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

Dù widthlà gì , leftbằng(100% - width)/2