import React, { Component } from 'react';import { View, Text, FlatList, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';const data = [    {id: 'Music', value: 'Music'},    {id: 'Events', value: 'Events'},    {id: 'About Us', value: 'About Us'},    {id: 'Benefits', value: 'Benefits'},    {id: 'Account', value: 'Account'},    {id: 'Social Media', value: 'Social Media'},    {id: 'FAQ', value: 'FAQ'},    {id: 'Settings', value: 'Settings'}  ];const numColumns = 2;const size = Dimensions.get('window').width/numColumns;  export const Grid = () => {    return (        <FlatList          style={{ marginTop: 20 }}          data={data}          renderItem={({item}) => (            <TouchableOpacity style={styles.itemContainer}>              <Text style={styles.item}>{item.value}</Text>            </TouchableOpacity>          )}          keyExtractor={item => item.id}          numColumns={numColumns} />      );}const styles = StyleSheet.create({    itemContainer: {      width: size,      height: size    },    item: {      flex: 1,      margin: 15,      fontSize: 25,      fontWeight: 'bold',      color: 'white',      backgroundColor: 'lightblue'    }  });我嘗試在子視圖和父視圖中使用 justifyContent: "center" 但它不起作用。textAlign: "center" 能夠水平對齊文本。