ReactNative:如何中心文本?

如何在ReactNative中横向和纵向放置文本?

我在rnplay.org中有一个示例应用程序,其中justifyContent =“center”alignItems =“center”不工作: 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; 

headline '风格删除heightjustifyContentalignItems 。 它将垂直居中文本。 添加textAlign: 'center' ,它将水平居中文本。

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

已经回答了,我想添加更多的话题和不同的方式来做到这一点,根据您的使用情况。

您可以添加adjustsFontSizeToFit={true} (当前未logging)到您的Text组件来自动调整父节点内的大小。

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

您还可以在文本组件中添加以下内容:

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

或者,您可以将以下内容添加到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

将这些样式设置为图像组件:{textAlignVertical:“center”,textAlign:“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> ) }