ReactNative: metin nasıl ortalanır?


212

ReactNative'de Metin hem yatay hem de dikey olarak nasıl ortalanır?

JustifyContent = "center" ve alignItems = "center" çalışmıyor rnplay.org örnek bir uygulama var : https://rnplay.org/apps/AoxNKQ

Metin ortalanmalıdır. Ve neden üstte metin (sarı) ve ana kap arasında bir kenar boşluğu var?

Kod:

'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;


bu yatay merkezli değil
itinance

1
tamam, bu yüzden: rnplay.org/apps/1hbnSA , güncellendi
Cherniv

WAAAA ... textAlign? gerçekten aptalca bir şey olacağını biliyordum .... Bunu bir cevap olarak yayınlamak gerekir
itinance

Yanıtlar:


356

Kimden headline'tarzı kaldır height, justifyContentve alignItems. Metni dikey olarak ortalar. Ekle textAlign: 'center've metni yatay olarak ortalar.

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

16
width<View>justifyContent: 'center', alignItems: 'center',
Ryan Walker

59

Zaten yanıtlandı, ancak konuya biraz daha eklemek ve kullanım durumunuza bağlı olarak bunu yapmanın farklı yollarını eklemek istiyorum.

Bir üst düğüm içindeki boyutu otomatik olarak ayarlamak adjustsFontSizeToFit={true}için TextBileşene (şu anda belgesiz) ekleyebilirsiniz .

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

Metin Bileşeninize aşağıdakileri de ekleyebilirsiniz:

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

Veya Metin bileşeninin üst öğesine aşağıdakileri ekleyebilirsiniz:

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

ya da her ikisi de

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

veya üçü de

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

Her şey ne yaptığınıza bağlı. Ayrıca konu hakkındaki tüm blog yayınımı da kontrol edebilirsiniz

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


bu beklenmelidir: <Text style = {{textAlignVertical: "center", textAlign: "center",}}> Merhaba </Text>
Tushar Pandey

Adamım 1.5 saatimi kurtardın. Aynı şeyi yapmaya çalışıyordum ama bu cevaba kadar: textAlignVertical: "center", textAlign: "center" <Metin /> Bileşen Stili olarak yapamadım .
ganeshdeshmukh

textAlignVertical yalnızca Android'dir. Bu çözümlerin hiçbiri metnimi dikey değil, yalnızca yatay olarak hizalamıyor.
sudo

14

Bu stilleri resim bileşenine ayarlayın: {textAlignVertical: "center", textAlign: "center"}



9

bu aynı anda Yatay ve Dikey hizalama için bir örnektir

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

Satır içi stillerin {{double-curly-braces}} içine alınması gereken ipucu için teşekkür ederiz.
MarkHu

6

Yatay ve Dikey ortaya hizalama

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

Sadece benim için <Text> 'i bir <View> içinde ortalamak açısından işe yarayan çözüm sadece yatay değil dikey olarak da. Teşekkür ederim!
RuntimeError

4

alignSelfMetin bileşenindeki özelliği kullanabilirsiniz

{ alignSelf : "center" }

4

TextSayfanızda bileşen nerede olursa olsun, bileşenin stilini ayarlamanız yeterlidir Text.

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

başka bir stil özelliği eklemenize gerek yoktur, bu size UI'nizin merkezinde metin ayarlayacağı muhteşem bir sihirdir.


2

Basit ekleme

textAlign: "center"

StyleSheet'inizde bu kadar. Umarım bu yardımcı olur.

düzenle: "merkez"


2

Aşağıdaki özellik kullanılabilir: {{alignItems: 'center'}}

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

1
Sorunun çözümü bu olsa bile, lütfen hepimizin öğrenebilmesi için biraz daha açıklama ekleyin.
harmonica141

Lütfen, ana düzeltmeyi dolaşmak için iki yıldız kullandığınız için geliştirin, ancak net değil ve diğer kısım karışıktır
Frederiko Cesar


2

Üst görünümde ayarla

justifyContent:center

ve çocuk görünümünde alignSelf: center


Anahtarlar deve durumunda olmalı justifyContentvealignSelf
Siddharth

1

Diğer cevaplarda belirtilen kullanım durumlarına ek olarak:

Metni bir BottomTabNavigator özel kullanım durumunda ortalamak için , showIcon öğesini false olarak ayarlamayı unutmayın (TabNavigator'da simgeler olmasa bile). Aksi takdirde metin Sekmenin altına doğru itilir.

Örneğin:

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"
    }
  }

0
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>
    )

}

0

önce üst görünümde ekle flex: 1, justifyContent: 'center', alignItems: 'center'

sonra metne textAlign ekleyin: 'center'

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.