如何将文本居中?

如何在ReactNative的水平和垂直中心文本?

我在rnplay.org中有一个示例应用程序，其中justifyContent = "中心"和alignItems = "中心"不能工作: https://rnplay.org/apps/AoxNKQ < / p >

文本应该居中。 为什么在顶部的文本(黄色)和父容器之间有一个边距?< / p >

代码:

'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;
434826 次浏览
小开
最佳答案

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

  headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
小开
将这些样式设置为图像组件: ｛ textAlignVertical:“中心”, textAlign:“中心” } < / p >
小开

已经回答了，但我想在这个主题上添加更多内容，并根据您的用例添加不同的方法。

你可以将adjustsFontSizeToFit={true}(目前没有文档)添加到Text Component中来自动调整父节点内部的大小。

  <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- native-9f7d1d68305b

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


}
小开

这是一个同时对水平和垂直进行对齐的例子

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

才是真正的魔法。

小开

水平和垂直中心对齐

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

你可以在文本组件上使用alignSelf属性

{ alignSelf : "center" }
小开

除了其他答案中提到的用例之外:

要在BottomTabNavigator的特定用例中集中文本，请记住将showIcon设置为假(即使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"
}
}
小开

只要页面中有Text组件，就需要设置Text组件的样式。

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

你不需要添加任何其他样式属性，这是壮观的魔术，它会设置你的文本在你的UI的中心。

小开

可以使用以下属性:\{\{alignItems: 'center'}}，因为您使用的是<Text>项而不是"string"。

<View style=\{\{alignItems: 'center'}}>
<Text> Hello i'm centered text</Text>
</View>
小开

简单的添加

textAlign: "center"

在你的样式表中，就是这样。

编辑:“中心”

小开

首先在父视图中添加 flex: 1、 justifyContent:“中心”, alignItems: 'center'

然后在文本中添加 textAlign:“中心”< / p >

小开

使用

textalign:中心

看风景

小开

在父视图中设置

justifyContent:center

在子视图中alignSelf:center

小开

你可以使用两种方法:

    要使文本水平居中对齐，应用属性(textAlign:"center")。 现在要使文本垂直对齐，首先检查弯曲方向。如果flexDirection是列应用属性(justifyContent:"center")，如果flexDirection是行是行应用属性(alignItems : "center") .

    使文本对齐中心应用相同的属性(textAlign:"center")。现在要使它垂直对齐，使<Text> </Text>的高度等于view and then apply属性 (textAlignVertical: "center")…< / p >

它很可能会起作用……

小开
好吧，所以这是一个基本问题，不要担心这个 只要写<视图>组件并将其包裹在<文本>组件< / p > 
<View style=\{\{alignItems: 'center'}}>
<Text> Write your Text Here</Text>
</View>

< >强alignitems:中心< / >强是一个道具，用于在十字架上居中项目

< >强justifycontent:“中心”< / >强是一个道具，用于在主轴上居中项目

小开

<视图样式=\{\{backgroundColor: 'blue'， justifyContent: 'center'}}>

                <Text style=\{\{ fontSize: 25, textAlign: 'center' }} >A</Text>
</View>
小开
< p >标题:{ textAlign: 'center'，fontWeight: 'bold'}

小开

创建一个视图并使用alignItems values center

<视图样式=\{\{alignItems: 'center'}}>

小开

在许多情况下，ReactNative支持CSS样式属性，命名为camelCase而不是标准的CSS dasherized-lisp-style(又名kebab-case)。

这与React/JSX相同。

CSS属性text-align有直接等价的textAlign

因此，通常值得尝试将CSS属性转换为camelCase。


提交答案