React Native Web: как вы центрируете текст?

Question

Я изучаю React Native Web. Я пытался центрировать текст на своей веб-странице, я пробовал много предложений из разных постов, но текст "меня зовут ... Его зовут ..." остается в левом верхнем углу веб-страницы независимо от того, какие свойства я добавляю / меняю в контейнере. С другой стороны, кнопка расположена по центру.

Спасибо за помощь

Код

import React, { useState } from "react"
import { StyleSheet, Text, View, Button } from "react-native"

export default function App() {
    const [name, setName] = useState('Joe');
    const [person, setPerson] = useState({ name: 'mario', age: 40})

    const clickHandler = () => {
        setName('chun-li');
        setPerson({name: 'luigi', age: 45})
    }   

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text >My name is {name}</Text>
                <Text >His name is {person.name} and his age is {person.age}</Text>
            </View>
            <View style={styles.buttonContainer}>
                <Button title='update state' onPress={clickHandler}/>
            </View> 
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        textAlignVertical: 'center',
        alignSelf: 'center',
    },

    buttonContainer: {
        alignItems: 'center',
    },

    header: {
        backgroundColor: 'green',
        alignSelf: 'center',
        justifyContent: "flex-start",
        alignItems: 'center',
        top: 0
    }
});

Answer 1

Прежде всего, вам нужно изменить

<View styles={styles.container}>
<View styles={styles.header}>

на

<View style={styles.container}>
<View style={styles.header}>

Наконец, добавьте изменения стиля в соответствии с вашими требованиями

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContainer: {
        alignItems: 'center',
    },
    header: {
        backgroundColor: 'green',
        justifyContent: "center",
        alignItems: 'center',
    }
});

Надеюсь, это поможет вы. Не стесняйтесь сомнений.