如何在 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
' 样式中删除 height
、justifyContent
和 alignItems
。它将垂直居中文本。添加 textAlign: 'center'
它将使文本水平居中。
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
已经回答,但我想根据您的用例添加更多关于该主题的内容以及不同的方法。
您可以将 adjustsFontSizeToFit={true}
(当前未记录)添加到 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>
这完全取决于你在做什么。您还可以查看我关于该主题的完整博客文章
textAlignVertical: "center", textAlign: "center"
,作为 <Text/>组件样式。
justifyContent: "center"
是魔法酱。谢谢!
将这些样式设置为图像组件: { textAlignVertical: "center", textAlign: "center" }
textAlignVertical: "center"
是真正的魔法。
水平和垂直居中对齐
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
这是同时水平和垂直对齐的示例
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
可以使用以下属性:{{alignItems: 'center'}}
,因为您使用的是项目 <Text>
而不是“字符串”。
<View style={{alignItems: 'center'}}>
<Text> Hello i'm centered text</Text>
</View>
您可以在 Text 组件上使用 alignSelf
属性
{ alignSelf : "center" }
<Text style={{ fontSize: 25, textAlign: 'center' }} >A</Text>
</View>
无论您在页面中的哪个位置使用 Text
组件,您只需设置 Text
组件的样式即可。
<Text style={{ textAlign: 'center' }}> Text here </Text>
您不需要添加任何其他样式属性,这是一种壮观的魔法,它会将您的文本设置在 UI 的中心。
简单添加
textAlign: "center"
在你的 styleSheet 中,就是这样。希望这会有所帮助。
编辑:“中心”
在父视图中设置
justifyContent:center
并在子视图中 alignSelf:center
justifyContent
和 alignSelf
好的,所以这是一个基本问题,不用担心,只需编写
<View style={{alignItems: 'center'}}>
<Text> Write your Text Here</Text>
</View>
alignitems:center 是用于在横轴上居中项目的道具
justifycontent:'center' 是用于在主轴上居中项目的道具
除了其他答案中提到的用例:
要在 BottomTabNavigator 的特定用例中居中文本,请记住将 showIcon 设置为 false(即使 TabNavigator 中没有图标)。否则文本将被推向 Tab 的底部。
例如:
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"
}
}
首先在父视图中添加 flex:1, justifyContent: 'center', alignItems: '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>
)
}
您可以为此使用两种方法...
要使文本水平居中对齐,请应用此属性 (textAlign:"center")。现在要使文本垂直对齐,首先检查 flex 的方向。如果 flexDirection 是列应用属性 (justifyContent:"center") 并且如果 flexDirection 是行是行应用属性 (alignItems : "center")。要使文本居中对齐,请应用相同的属性 (textAlign:"center")。现在使其垂直对齐,使
最有可能它会工作......
width
一起使用,除非您使用justifyContent: 'center', alignItems: 'center',
将其包装在<View>
中width: "100%",
奏效了