如何在lightblue flexbox中居中显示文本？

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

我尝试在子视图和父视图中使用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',
    }
  });

Answer 2

请附上截图，询问有关在react原生设计方面的问题。要回答这个问题，你可以试试这个。

item:{
      alignSelf: 'center',
      flex: 1,
      margin: 15,
      fontSize: 25,
      fontWeight: 'bold',
      color: 'white',
      backgroundColor: 'lightblue'
},
itemContainer: {
      width: size,
      height: size,
      justifyContent: 'center',
      alignItems: 'center'
},

Answer 3

您的itemContainer类缺少display: flex属性。这是在flex项目上使用flexbox属性所必需的。