ReactNative: come centrare il testo?

Question

Come centrare il testo in ReactNative sia in orizzontale che in verticale?

Ho un'applicazione esempio nel rnplay.org dove justifyContent = "center" e alignItems = "center" non funziona: https://rnplay.org/apps/AoxNKQ

Il testo dovrebbe essere centrato. E perché c'è un margine in alto tra il testo (giallo) e il contenitore principale?

Codice:

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

Answer 1

Da headline 'stile rimuovere height, justifyContent e alignItems. Centrerà il testo verticalmente. Aggiungi textAlign: 'center' e centrerà il testo orizzontalmente.

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

Answer 2

impostare questi stili a componente dell'immagine: { textAlignVertical: "centro", textAlign: "centro" }

Answer 3

già risposto da vorrei aggiungere un po 'di più sul tema e diversi modi per farlo in base al tuo caso d'uso.

È possibile aggiungere adjustsFontSizeToFit={true} (attualmente non documentato) a Text Componente per regolare automaticamente le dimensioni all'interno di un nodo genitore.

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

è anche possibile aggiungere quanto segue nel Componente Testo:

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

Oppure si può aggiungere quanto segue nella genitore del componente Testo:

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

o entrambi

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

o tutti three

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

Tutto dipende da cosa stai facendo. È inoltre possibile cassa my post completo blog sul tema

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

Answer 4

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

}