Центр позиционирования текста React Native

Question

У меня есть следующий компонент заголовка для моего приложения:

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

Iучусь реагировать родным из удемы.С помощью этого кода преподаватель размещает текст в центре контейнера [поле красного цвета].Но в моем эмуляторе это не работает.

По-разному реагируют стили в ios и android?Как репетитор запускал / писал коды в mac.

Answer 1

На устройствах Android вы также должны добавить textAlign: 'center' к вашему стилю Текстовый компонент:

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

Вывод:

Пример:

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

Answer 2

Попробуйте это;)

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