javascript - 如何使浅蓝色弹性盒中的文本居中？

Question

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

I want to be able to center text in both axes

我尝试在 subview 和父 View 中使用 justifyContent: "center"但它不起作用。textAlign:“center”可以水平对齐文本。

Answer 1

尝试这样。

export const Grid = () => {
    return (
        <FlatList
          style={{ marginTop: 20 }}
          data={data}
          renderItem={({item}) => (
            <TouchableOpacity style={styles.itemContainer}>
              <View style={styles.item}>
                <Text style={styles.itemText}>{item.value}</Text>
              </View>
            </TouchableOpacity>
          )}
          keyExtractor={item => item.id}
          numColumns={numColumns} />
      );
}

const styles = StyleSheet.create({
    itemContainer: {
      width: size,
      height: size
    },
    item: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 15,
      backgroundColor: 'lightblue'
    },
    itemText: {
      fontSize: 25,
      textAlign: 'center',
      fontWeight: 'bold',
      color: 'white',
    }
  });