温馨提示:本文翻译自stackoverflow.com,查看原文请点击:android - Text position center React Native
android react-native react-native-android reactjs

android - 文字位置中心React Native

发布于 2020-03-27 10:17:26

应用截图。 标题栏显示“相册!”,其余应用为空白 我的应用程序具有以下标头组件:

const Header = () => {
const { textStyle, viewStyle } = styles;

return (
    <View style={viewStyle}>
        <Text style={textStyle}>Albums!</Text>        
    </View>
 );
};

该组件的样式如下:

const styles = {
viewStyle: {
    backgroundColor: '#F8F8F8',        
    justifyContent: 'center', //Y-axis
    alighItems: 'center', // x-axis 
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    elevation: 2,
    position: 'relative'
},
textStyle: {
    fontSize: 20
 }
};

我正在学习来自Udemy的本地反应。使用此代码,导师将文本放置在容器[红色框]的中心。但这在我的模拟器中不起作用。

在iOS和Android中,React样式的渲染方式是否有所不同?由于辅导员正在Mac中运行/编写代码。

查看更多

查看更多

提问者
Pawan Rai
被浏览
225
Tim 2019-07-03 20:15

在android设备上,您还需要添加textAlign: 'center'文本组件样式:

textStyle: {
    fontSize: 20,
    textAlign: 'center',
}

输出:

输出

例:

https://snack.expo.io/@tim1717/tactless-chocolates