ReactNative: Wie zentriere ich Text?

Wie zentriere ich Text in ReactNative sowohl horizontal als auch vertikal?

Ich habe eine Beispielanwendung in rnplay.org, in der adjustContent = "center" und alignItems = "center" nicht funktionieren: https://rnplay.org/apps/AoxNKQ

Der Text sollte zentriert sein. Und warum befindet sich oben ein Rand zwischen dem Text (gelb) und dem übergeordneten Container?

Code:

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

Aus headline'Stil entfernen height, justifyContentund alignItems. Der Text wird vertikal zentriert. Fügen Sie hinzu, textAlign: 'center'und der Text wird horizontal zentriert.

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

Bereits beantwortet, aber ich möchte etwas mehr zum Thema und zu verschiedenen Möglichkeiten hinzufügen, je nach Anwendungsfall.

Sie können adjustsFontSizeToFit={true}der TextKomponente (derzeit nicht dokumentiert) hinzufügen , um die Größe innerhalb eines übergeordneten Knotens automatisch anzupassen.

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

Sie können Ihrer Textkomponente auch Folgendes hinzufügen:

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

Oder Sie können dem übergeordneten Element der Textkomponente Folgendes hinzufügen:

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

oder beides

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

oder alle drei

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

Es hängt alles davon ab, was Sie tun. Sie können auch meinen vollständigen Blog-Beitrag zum Thema lesen

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

Setzen Sie diese Stile auf die Bildkomponente: {textAlignVertical: "center", textAlign: "center"}

textAlignVertical: "center"

ist die wahre Magie.

Dies ist ein Beispiel für die gleichzeitige horizontale und vertikale Ausrichtung

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

Horizontale und vertikale Mittelausrichtung

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

Sie können die alignSelfEigenschaft für die Textkomponente verwenden

{ alignSelf : "center" }

Überall dort, wo Sie eine TextKomponente auf Ihrer Seite haben, müssen Sie nur den Stil der TextKomponente festlegen .

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

Sie müssen keine andere Stileigenschaft hinzufügen. Dies ist eine spektakuläre Magie, mit der Sie Text in die Mitte Ihrer Benutzeroberfläche setzen.

Einfach hinzufügen

textAlign: "center"

in deinem styleSheet ist es das. Hoffe das würde helfen.

edit: "center"

Die folgende Eigenschaft kann verwendet werden: {{alignItems: 'center'}}

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

gebraucht

Textausrichtung: Mitte

bei der Aussicht

Zusätzlich zu den in den anderen Antworten genannten Anwendungsfällen:

Denken Sie daran, showIcon auf false zu setzen, um Text im speziellen Anwendungsfall eines BottomTabNavigator zu zentrieren (auch wenn der TabNavigator keine Symbole enthält). Andernfalls wird der Text zum unteren Rand der Registerkarte verschoben.

Beispielsweise:

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

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

}

Fügen Sie zuerst in der übergeordneten Ansicht flex: 1 hinzu, rechtfertigen Sie den Inhalt: 'center', alignItems: 'center'

Fügen Sie dann im Text textAlign hinzu: 'center'