文本位置中心 React Native答案

【问题标题】：Text position center React Native文本位置中心 React Native
【发布时间】：2019-07-03 12:07:59
【问题描述】：

我的应用程序有以下标头组件：

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 学习 React Native。使用此代码，导师将文本定位在容器的中心 [红色框]。但它在我的模拟器中不起作用。

react 样式在 ios 和 android 中的呈现方式是否不同？由于导师在 mac 中运行/编写代码。

【问题讨论】：

标签： android reactjs react-native react-native-android

【解决方案1】：

在 Android 设备上，您还需要将 textAlign: 'center' 添加到您的文本组件样式中：

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

输出：

示例：

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

【讨论】：

【解决方案2】：

试试这个;)

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

【讨论】：