ReactNative: पाठ को कैसे केंद्र करें?

Question

क्षैतिज और ऊर्ध्वाधर दोनों में अभिक्रियात्मक में पाठ कैसे केंद्रित करें?

मेरे पास rnplay.org में एक उदाहरण अनुप्रयोग है जहाँ justifyContent = "center" और 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 ... textAlign? मुझे पता था कि यह वास्तव में कुछ बेवकूफी होगी .... आपको इसे एक उत्तर के रूप में पोस्ट करना चाहिए

— 15

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

यह उम्मीद की जानी चाहिए: <पाठ शैली = {{textAlignVertical: "center", textAlign: "center",}}> Hiiiz </ पाठ>

— तुषार पांडे

यार तुमने मेरे 1.5 घंटे बचा लिए। मैं ऐसा ही करने की कोशिश कर रहा था, लेकिन इस उत्तर को तब तक नहीं ले सकता था जब तक textAlignVertical: "center", textAlign: "center" , जैसा कि <पाठ /> घटक शैली।

— गनेशदेशमुख

textAlignVertical केवल Android है। इनमें से कोई भी समाधान मेरे पाठ को लंबवत रूप से संरेखित नहीं कर रहा है, केवल क्षैतिज रूप से।

— सूडो

Answer 3

इन शैलियों को छवि घटक पर सेट करें: {textAlignVertical: "center", textAlign: "center"}

Answer 4

textAlignVertical: "center"

असली जादू है।

Answer 5

यह एक साथ क्षैतिज और ऊर्ध्वाधर संरेखण के लिए एक उदाहरण है

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

Comments

टिप के लिए धन्यवाद कि इनलाइन शैलियों को {{डबल-कर्ली-ब्रेसेस}} में संलग्न किया जाना चाहिए।

— मार्कहु

Answer 6

क्षैतिज और ऊर्ध्वाधर केंद्र संरेखण

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

Comments

केवल एक समाधान जो मेरे लिए <टेक्स्ट> को <View> के अंदर केंद्रित करने के संदर्भ में काम करता है, न केवल क्षैतिज रूप से, बल्कि लंबवत भी। धन्यवाद!

— RuntimeError

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

यहां तक ​​कि अगर यह सवाल का समाधान हो सकता है, तो कृपया कुछ और स्पष्टीकरण जोड़ें ताकि हम सभी सीख सकें।

— हारमोनिका

कृपया, इसे सुधारें क्योंकि आप मुख्य सुधार को प्रसारित करने के लिए दो तारांकनों का उपयोग कर रहे हैं, लेकिन यह स्पष्ट नहीं है और दूसरा भाग भ्रमित है

— फ्रेडेरिको सेसर

Answer 11

उपयोग किया गया

textalign: केंद्र

देखने पर

Answer 12

पैरेंट दृश्य में सेट करें

justifyContent:center

और बच्चे को देखने में संरेखित करें: केंद्र

Comments

कुंजी ऊंट के मामले में होनी चाहिए justifyContentऔरalignSelf

— सिद्धार्थ

Answer 13

अन्य उत्तरों में उल्लिखित उपयोग के मामलों के अलावा:

एक बॉटमटेबनाविगेटर के विशिष्ट उपयोग के मामले में पाठ को केंद्र में रखने के लिए, showIcon को गलत पर सेट करना याद रखें (भले ही आपके पास में आइकन न हों)। अन्यथा पाठ को टैब के नीचे की ओर धकेला जाएगा।

उदाहरण के लिए:

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, औचित्यपूर्ण: 'केंद्र', संरेखण: 'केंद्र'

इसके बाद टेक्स्ट में टेक्स्ट जोड़ें: 'सेंटर'