ตอบสนองการกำหนดตำแหน่งกึ่งกลางแนวนอนแบบเนทีฟ

93

มันดูเหมือนว่าจะมีposition:absoluteการใช้งานเป็นองค์ประกอบที่ไม่สามารถใช้เป็นศูนย์กลางหรือjustifyContent alignItemsมีวิธีแก้ปัญหาในการใช้งานmarginLeftแต่ไม่ได้แสดงเหมือนกันสำหรับอุปกรณ์ทั้งหมดแม้จะใช้ขนาดเพื่อตรวจจับความสูงและความกว้างของอุปกรณ์

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

— Hasen
แหล่งที่มา

องค์ประกอบของคุณมีความกว้างคงที่หรือไดนามิกหรือไม่

— Ivan Chernykh

252

ห่อเด็กที่คุณต้องการให้อยู่กึ่งกลางในมุมมองและทำให้มุมมองสมบูรณ์

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

— Stephen Horvath
แหล่งที่มา

28

มีประโยชน์มาก. มีทางลัดที่ดีสำหรับผู้ที่ params สไตล์แขวนออกจากเป็นวัตถุ: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

— Stephen Horvath

วิธีนี้จะกู้คืนรูปภาพทั้งหมดหากข้อความมีสีพื้นหลัง: /

— DevMultiTech

@codewise ใช่มีวิธีใหม่ในการทำลองดูคำตอบของฉัน

— David

73

หากคุณต้องการจัดองค์ประกอบหนึ่งให้อยู่กึ่งกลางคุณสามารถใช้alignSelf :

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

นี่คือตัวอย่าง (โปรดทราบว่าโลโก้หลักเป็นมุมมองที่มีตำแหน่ง: สัมพัทธ์ )

— เดวิดโนเรนา
แหล่งที่มา

1

alignSelf ไม่ได้ผลสำหรับฉัน (จริงๆแล้วมันไม่ได้ทำอะไรเลย) คุณสามารถเพิ่มบริบทเพิ่มเติมให้กับโค้ดได้ไหม

— johnny kehr

1

คุณต้องให้ผู้ปกครองแสดง: 'flex' @ wilc0

— Travis Delly

12

คุณสามารถจัดกึ่งกลางรายการที่แน่นอนได้โดยระบุคุณสมบัติด้านซ้ายด้วยความกว้างของอุปกรณ์หารด้วยสองและลบครึ่งหนึ่งขององค์ประกอบที่คุณต้องการให้อยู่ตรงกลาง

ตัวอย่างเช่นสไตล์ของคุณอาจมีลักษณะเช่นนี้

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

— คอเรย์
แหล่งที่มา

สิ่งนี้ใช้ได้เฉพาะเมื่อคุณทราบความกว้างขององค์ประกอบล่วงหน้า

— Adamski

1

หากคุณไม่ทราบว่าองค์ประกอบไม่มีความกว้างที่ทราบคุณสามารถใช้ onLayout เพื่อรับความกว้างขององค์ประกอบได้

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

— Corey

7

สร้างเต็มความกว้าง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สำหรับองค์ประกอบที่จัดชิดด้านล่าง

— มัสบอสซุน
แหล่งที่มา

ต้องยอมรับว่าเป็นคำตอบที่ถูกต้องซึ่งใช้ได้กับทุกสถานการณ์

— aprilmintacpineda

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>

— เอริสมาบู
แหล่งที่มา

ฮ่า ๆ . นี้คือการทำงานสำหรับฉัน แต่เราจำเป็นต้องเพิ่ม `style = {{alignItems: 'ศูนย์' justifyContent: 'ศูนย์' flexDirection: 'แถว'}}`

— Babie

1

มันง่ายมากจริงๆ ใช้เปอร์เซ็นต์สำหรับwidthและleftคุณสมบัติ ตัวอย่างเช่น:

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

สิ่งที่widthมีleftความเท่าเทียมกัน(100% - width)/2

— ผู้ใช้ 11360198
แหล่งที่มา