webentwicklung-frage-antwort-db.com.de

Native reagieren: Wie zentriere ich Text?

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

Ich habe in rnplay.org eine Beispielanwendung, bei der justifyContent = "center" und alignItems = "center" nicht funktioniert: 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;
117
itinance

Entfernen Sie im Stil headlineheight, justifyContent und alignItems. Der Text wird vertikal zentriert. Wenn Sie textAlign: 'center' hinzufügen, wird der Text horizontal zentriert.

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

Bereits beantwortet von Ich möchte ein wenig mehr zum Thema hinzufügen und je nach Anwendungsfall unterschiedliche Wege gehen.

Sie können adjustsFontSizeToFit={true} (derzeit undokumentiert) zu Ihrer Text-Komponente hinzufügen, um die Größe in einem übergeordneten Knoten automatisch anzupassen. 

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

Sie können in 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 gesamten Blogbeitrag zum Thema lesen

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

30
garrettmac

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

12
mocanSergiu666

dies ist ein Beispiel für die gleichzeitige Ausrichtung von Horizontal und Vertical

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

ist die wahre Magie.

6
Muzammil

Horizontale und Vertikale Mittenausrichtung

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

Sie können die alignSelf-Eigenschaft für die Textkomponente verwenden

{ alignSelf : "center" }
1
Meenu Negi

Wo immer Sie Text-Komponente auf Ihrer Seite haben, müssen Sie nur den Stil der Test-Komponente festlegen.

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

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

1
Hardik Virani
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
Giang
 <View **style={{alignItems: 'center'}}**>

    <Text>Hello im centered text{this.props.name}!</Text>

      </View>

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

Um den Text im speziellen Anwendungsfall von BottomTabNavigator zu zentrieren, müssen Sie showIcon auf false setzen (auch wenn Sie keine Symbole im TabNavigator haben). Andernfalls wird der Text in Richtung Tab unten verschoben.

Zum Beispiel:

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
Gunnar Karlsson