प्रतिक्रियाशील मूल निरपेक्ष स्थिति क्षैतिज केंद्र

Question

ऐसा लगता है कि position:absoluteउपयोग में एक तत्व का उपयोग करके केंद्रित नहीं किया जा सकता है justifyContentया alignItems। उपयोग करने के लिए वर्कअराउंड है, marginLeftलेकिन डिवाइस की ऊंचाई और चौड़ाई का पता लगाने के लिए आयामों का उपयोग करके सभी उपकरणों के लिए समान प्रदर्शित नहीं करता है।

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

Comments

क्या आपके तत्व में स्थैतिक चौड़ाई या गतिशील है?

— इवान चेर्निख

Answer 1

उस बच्चे को लपेटें जिसे आप एक दृश्य में केंद्रित करना चाहते हैं और दृश्य को पूर्ण बनाएं।

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

Comments

बहुत उपयोगी। वहाँ उन शैली params के लिए एक अच्छा शॉर्टकट StyleSheetवस्तु से दूर लटक रहा है ...StyleSheet.absoluteFillObject:। देख github.com/facebook/react-native/blob/master/Libraries/...

— WKW

क्या यह Viewस्क्रीन पर सभी क्लिक करने योग्य स्थान नहीं बनाता है ? उदाहरण के लिए, अगर मेरे पास इस पूरी तरह से तैनात के नीचे एक घटक था View, तो मैं उस पर क्लिक पंजीकृत नहीं कर पाऊंगा।

— जेम्स ११

@ जेम्स111 ऐसा दिखता है कि आप pointerEvents='box-none'दृश्य के माध्यम से स्पर्श पास करने के लिए जोड़ सकते हैं : github.com/facebook/react-native/issues/12360

— स्टीफन होर्वाथ

यदि पाठ में पृष्ठभूमि का रंग है: /

— DevMultiTech

@ कोडीज़ हाँ, यह करने के लिए एक नया तरीका है, मेरे जवाब की जाँच करें

— डेविड नोरेना

Answer 2

यदि आप एक तत्व को स्वयं केन्द्रित करना चाहते हैं तो आप संरेखण का उपयोग कर सकते हैं :

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

यह एक उदाहरण है (ध्यान दें कि जनक स्थिति के साथ एक दृश्य है : रिश्तेदार )

Comments

संरेखण मेरे लिए काम नहीं किया (यह कुछ भी नहीं किया, वास्तव में)। क्या आप कोड में थोड़ा और संदर्भ जोड़ सकते हैं?

— जॉनी केहर

आपको प्रदर्शित होने के लिए माता-पिता की आवश्यकता है: 'flex' @ wilc0

— ट्रैविस

Answer 3

आप दो से विभाजित डिवाइस की चौड़ाई के साथ बाईं संपत्ति प्रदान करके और उस तत्व को आधा करके घटा सकते हैं, जिसे आप केंद्र की चौड़ाई से जोड़ना चाहते हैं।

उदाहरण के लिए, आपकी शैली कुछ इस तरह दिख सकती है।

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

Comments

यह तभी काम करता है जब आप तत्वों की चौड़ाई पहले से जानते हों

— Adamski

यदि आपको पता नहीं है कि तत्व में एक ज्ञात चौड़ाई नहीं है, तो आप तत्वों की चौड़ाई प्राप्त करने के लिए onLayout का उपयोग कर सकते हैं measure(layout) { const { width } = layout; this.setState({ width: width }) } ... <View onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— Corey

Answer 4

एक पूर्ण-चौड़ाई बनाएं 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नीचे संरेखित घटक के लिए गुण जोड़ सकते हैं ।

Answer 5

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

और यह जोड़ें

import {StyleSheet} from 'react-native';

Comments

लघु, कोड-केवल उत्तर अक्सर स्टैक ओवरफ्लो पर फेंक दिए जाते हैं। 'निम्न गुणवत्ता' के रूप में चिह्नित किए जाने से बचने के लिए, कुछ व्याख्यात्मक पाठ जोड़ने पर विचार करें।

— एड्रियन मोल

Answer 6

आप कोड की कोशिश कर सकते हैं

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

Comments

Haha। यह मेरे लिए काम कर रहा है, हालाँकि, हमें 'style = {{alignItems:' center ', justifyContent:' center ', flexDirection:' row '}} `

— babie

Answer 7

यह वास्तव में बहुत सरल है। widthऔर leftगुणों के लिए प्रतिशत का उपयोग करें । उदाहरण के लिए:

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

जो भी widthहै, leftबराबर है(100% - width)/2