প্রতিক্রিয়াশীল: পাঠ্য কেন্দ্রে রাখবেন?

Question

অনুভূমিক এবং উল্লম্ব উভয় ক্ষেত্রে পাঠ্যকে কীভাবে প্রতিক্রিয়াশীল করবেন?

Rnplay.org এ আমার একটি উদাহরণ রয়েছে যেখানে ন্যায্যতা কনটেন্ট = "কেন্দ্র" এবং alignItems = "কেন্দ্র" কাজ করছে না: https://rnplay.org/apps/AoxNKQ

পাঠ্যটি কেন্দ্রিক হওয়া উচিত। এবং কেন টেক্সট (হলুদ) এবং পিতামহীন ধারকটির মধ্যে শীর্ষে একটি মার্জিন রয়েছে?

কোড:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>

                </View>
                <View style={styles.otherContainer}>
                </View>
            </View>
    );
  }
});

var styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
    },

    topBox: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'lightgray',
        justifyContent: 'center',
        alignItems: 'center',
    },
    headline: {
        fontWeight: 'bold',
        fontSize: 18,
    marginTop: 0,
        width: 200,
        height: 80,
    backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
    },

  otherContainer: {
        flex: 4,
        justifyContent: 'center',
        alignItems: 'center',
    backgroundColor: 'green',
    },


});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;

Comments

এটি পছন্দ করুন: rnplay.org/apps/1hbnSA ?

— চেরনিভ

এটি অনুভূমিক কেন্দ্রিক নয়

— আইটিনেন্স

ঠিক আছে, তাই এটি: rnplay.org/apps/1hbnSA , আপডেট হয়েছে

— চেরনিভ

WAAAA ... টেক্সটএলাইন? আমি জানতাম এটি সত্যিই বোকামি কিছু হবে .... আপনার উত্তর হিসাবে এটি পোস্ট করা উচিত

— itinance

Answer 1

থেকে headline'শৈলী সরান height, justifyContentএবং alignItems। এটি পাঠ্যটিকে উল্লম্বভাবে কেন্দ্র করবে। যোগ করুন textAlign: 'center'এবং এটি পাঠ্যটিকে অনুভূমিকভাবে কেন্দ্র করবে।

  headline: {
    textAlign: 'center', // <-- the magic
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 0,
    width: 200,
    backgroundColor: 'yellow',
  }

Comments

width<View>justifyContent: 'center', alignItems: 'center',

— রায়ান ওয়াকার

Answer 2

ইতিমধ্যে জবাব দেওয়া হয়েছে তবে আমি আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে বিষয়টিতে এবং এটি করার বিভিন্ন পদ্ধতিতে আরও কিছু যুক্ত করতে চাই।

প্যারেন্ট নোডের অভ্যন্তরে আকারটি স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে adjustsFontSizeToFit={true}আপনি Textকম্পোনেন্টে (বর্তমানে অননুমোদিত) যুক্ত করতে পারেন ।

  <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

আপনি আপনার পাঠ্য উপাদানটিতে নিম্নলিখিতগুলি যুক্ত করতে পারেন:

<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

অথবা আপনি পাঠ্য উপাদানটির পিতামাতার সাথে নিম্নলিখিতগুলি যুক্ত করতে পারেন:

<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text>Hiiiz</Text>
</View>

অথবা উভয়

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

বা তিনটি

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text adjustsFontSizeToFit={true} 
           numberOfLines={1} 
           style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

এটি সমস্ত কি আপনি করছেন তার উপর নির্ভর করে। আপনি এই বিষয়ের উপর আমার সম্পূর্ণ ব্লগ পোস্ট চেকআউট করতে পারেন

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

Comments

এটি প্রত্যাশা করা উচিত: <টেক্সট স্টাইল = {{টেক্সটআলাইনভার্টিকাল: "কেন্দ্র", পাঠ্যলাইন: "কেন্দ্র", i}> হাইইজ </txt>

— তুষার পান্ডে

মানুষ আপনি আমার 1.5 ঘন্টা বাঁচিয়েছেন। আমি একই কাজ করার চেষ্টা করছিলাম কিন্তু এই উত্তর না হওয়া পর্যন্ত পারিনি: textAlignVertical: "center", textAlign: "center" <টেক্সট /> উপাদান উপাদান হিসাবে।

— গণেশদেশমুখ

TextAlignVerical কেবল অ্যান্ড্রয়েড। এই সমাধানগুলির কোনওটিই আমার পাঠ্যকে উলম্বভাবে সারিবদ্ধ করছে না, কেবল অনুভূমিকভাবে।

— sudo

Answer 3

এই শৈলীগুলি চিত্রের উপাদানগুলিতে সেট করুন: {টেক্সটএলাইনভের্টিকাল: "কেন্দ্র", পাঠ্যলাইন: "কেন্দ্র"}

Answer 4

textAlignVertical: "center"

আসল যাদু।

Answer 5

এটি একই সাথে অনুভূমিক এবং উল্লম্ব সারিবদ্ধকরণের জন্য একটি উদাহরণ

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>

Comments

টিপটির জন্য ধন্যবাদ যে ইনলাইন স্টাইলগুলি অবশ্যই {{ডাবল-কোঁকড়ানো-ধনুর্বন্ধনী} in এ আবদ্ধ থাকতে হবে}

— মার্কহু

Answer 6

অনুভূমিক এবং উল্লম্ব কেন্দ্র প্রান্তিককরণ

<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
     <Text> Example Test </Text>
</View>

Comments

<< ভিউ> এর অভ্যন্তরে <টেক্সট> কেন্দ্রিকতার ক্ষেত্রে কেবলমাত্র সমাধানটি আমার পক্ষে কাজ করেছে কেবল অনুভূমিকভাবে নয়, উল্লম্বভাবেও। ধন্যবাদ!

— রানটাইম এরর

Answer 7

আপনি alignSelfপাঠ্য উপাদানটিতে সম্পত্তি ব্যবহার করতে পারেন

{ alignSelf : "center" }

Answer 8

Textআপনার পৃষ্ঠায় যেখানেই উপাদান রয়েছে কেবলমাত্র আপনাকে Textউপাদানটির স্টাইল সেট করতে হবে ।

 <Text style={{ textAlign: 'center' }}> Text here </Text>

আপনার অন্য কোনও স্টাইলিং সম্পত্তি যুক্ত করার দরকার নেই, এটি দর্শনীয় যাদু এটি আপনার ইউআই এর মাঝখানে আপনাকে পাঠ্য সেট করবে।

Answer 9

সাধারণ অ্যাড

textAlign: "center"

আপনার স্টাইলশীট এ, এটি। আশা করি এটি সাহায্য করবে।

সম্পাদনা: "কেন্দ্র"

Answer 10

নিম্নলিখিত সম্পত্তি ব্যবহার করা যেতে পারে: {{alignItems: 'center'}}

<View style={{alignItems: 'center'}}>
 <Text>Hello im centered text{this.props.name}!</Text>
</View>

Comments

এমনকি যদি এই প্রশ্নের সমাধান হতে পারে তবে দয়া করে আরও কিছু ব্যাখ্যা যুক্ত করুন যাতে আমরা সবাই শিখতে পারি।

— harmonica141

দয়া করে এটিকে উন্নত করুন কারণ আপনি মূল সংশোধন প্রচার করার জন্য দুটি নক্ষত্র ব্যবহার করছেন তবে এটি পরিষ্কার নয় এবং অন্য অংশটি বিভ্রান্ত

— ফ্রেডেরিকো সিজার

Answer 11

ব্যবহৃত

textalign: কেন্দ্র

ভিউ এ

Answer 12

প্যারেন্ট ভিউতে সেট করুন

justifyContent:center

এবং শিশু দেখুন এ্যালাইনসেল্ফ: কেন্দ্র

Comments

কীগুলি উটের ক্ষেত্রে হওয়া উচিত justifyContentএবংalignSelf

— সিদ্ধার্থ

Answer 13

অন্যান্য উত্তরে উল্লিখিত ব্যবহারের মামলা ছাড়াও:

বটমট্যাবনাভিগেটরের নির্দিষ্ট ব্যবহারের ক্ষেত্রে পাঠ্যকে কেন্দ্র করতে , শো আইকনটিকে মিথ্যাতে সেট করতে ভুলবেন না (এমনকি যদি ট্যাবনাভিগেটরে আইকন না থাকে)। অন্যথায় পাঠ্যটি ট্যাবের নীচের দিকে ঠেলে দেওয়া হবে।

উদাহরণ স্বরূপ:

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen
}, {
  tabBarOptions: {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    showIcon: false, //do this
    labelStyle: {
      fontSize: 20,
      textAlign: 'center',
    },
    tabStyle: {
      backgroundColor: 'grey',
      marginTop: 0,
      textAlign: 'center',
      justifyContent: 'center',
      textAlignVertical: "center"
    }
  }

Answer 14

const styles = StyleSheet.create({
        navigationView: {
        height: 44,
        width: '100%',
        backgroundColor:'darkgray',
        justifyContent: 'center', 
        alignItems: 'center' 
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'white',
        textAlign: 'center',
    },
})


render() {
    return (
        <View style = { styles.navigationView }>
            <Text style = { styles.titleText } > Title name here </Text>
        </View>
    )

}

Answer 15

প্রথমে প্যারেন্ট ভিউ ফ্লেক্সে যুক্ত করুন: 1, জাস্টিফাই কনটেন্ট: 'সেন্টার', অ্যালাইন্ট আইটেম: 'সেন্টার'

তারপরে পাঠ্যে টেক্সট যুক্ত করুনলাইন: 'কেন্দ্র'