নেটিভ পরম অবস্থানের অনুভূমিক কেন্দ্রের প্রতিক্রিয়া জানান

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

খুব দরকারী. ঐ শৈলী বন্ধ ঝুলন্ত প্যারাম জন্য একটি চমৎকার শর্টকাট এর StyleSheetবস্তু: ...StyleSheet.absoluteFillObject। দেখতে github.com/facebook/react-native/blob/master/Libraries/...

— wkw

এটি কি Viewস্ক্রিনে সমস্ত ক্লিকযোগ্য স্থান গ্রহণ করে না? উদাহরণস্বরূপ, যদি আমার একেবারে অবস্থিত এর নীচে কোনও উপাদান থাকে তবে আমি Viewএটিতে ক্লিকগুলি নিবন্ধ করতে সক্ষম হব না।

— জেমস 111

@ জেমস 111 দেখে মনে হচ্ছে আপনি এই দৃশ্যটি ছুঁতে পেরে যোগ করতে পারেন pointerEvents='box-none': github.com/facebook/react-native/issues/12360

— স্টিফেন

— পাঠ্যটির

@ কোডওয়ালা হ্যাঁ, এটি করার একটি নতুন উপায় আছে, আমার উত্তরটি দেখুন

— ডেভিড নোরিয়া

Answer 2

আপনি যদি একটি উপাদান নিজেই কেন্দ্রীভূত করতে চান তবে আপনি অ্যালাইনসেলফ ব্যবহার করতে পারেন :

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

এটি একটি উদাহরণ (লোগো পিতামাতার অবস্থানের সাথে একটি ভিউ মনে রাখবেন : আপেক্ষিক )

Comments

alignSelf আমার পক্ষে কাজ করেনি (আসলে এটি কিছুই করেনি)। আপনি কি কোডটিতে কিছুটা আরও প্রসঙ্গ যুক্ত করতে পারবেন?

— কহের

আপনার প্রদর্শিত হতে পিতামাতার দরকার: 'নমনীয়' @ wilc0

— ট্র্যাভিস ডেলি

Answer 3

আপনি ডিভাইসটির প্রস্থ দুটি দিয়ে বিভক্ত করে বাম সম্পত্তি সরবরাহ করে এবং কেন্দ্রের প্রস্থের যে উপাদানটি চান তার অর্ধেক বিয়োগ করে আপনি পরম আইটেমগুলিকে কেন্দ্র করতে পারেন।

উদাহরণস্বরূপ, আপনার স্টাইলটি দেখতে এরকম কিছু দেখাচ্ছে।

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

Comments

এই শুধুমাত্র কাজ করে আপনি যদি জানেন উপাদানের পূর্বেই প্রস্থ

— Adamski

যদি আপনি না জানেন যে উপাদানটির একটি পরিচিত প্রস্থ নেই তবে আপনি উপাদানগুলির প্রস্থটি পেতে লেআউটটি ব্যবহার করতে পারেন measure(layout) { const { width } = layout; this.setState({ width: width }) } ... <View onLayout={(event) => { this.measure(event.nativeEvent.layout) }} ...

— কোরি

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

হা হা। এটি আমার জন্য কাজ করছে, তবে, আমাদের add শৈলী = {{alignItems: 'কেন্দ্র', ন্যায্যতা কনটেন্ট: 'কেন্দ্র', ফ্লেক্স দিকনির্দেশ: 'সারি'}} `

— বাচ্চা

Answer 7

এটা সত্যিই খুব সহজ। widthএবং leftবৈশিষ্ট্যের জন্য শতাংশ ব্যবহার করুন । উদাহরণ স্বরূপ:

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

যাই হোক না কেন width, leftসমান(100% - width)/2