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; 

Answer 1

从headline '风格删除height ， justifyContent和alignItems 。 它将垂直居中文本。 添加textAlign: 'center' ，它将水平居中文本。

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

Answer 2

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

您可以添加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

Answer 3

将这些样式设置为图像组件：{textAlignVertical：“center”，textAlign：“center”}

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