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

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

Answer 3

请附上截图，询问有关在 React Native 中进行设计的问题。来到答案你可以试试这个。

item:{

      alignSelf: 'center',

      flex: 1,

      margin: 15,

      fontSize: 25,

      fontWeight: 'bold',

      color: 'white',

      backgroundColor: 'lightblue'

},

itemContainer: {

      width: size,

      height: size,

      justifyContent: 'center',

      alignItems: 'center'

},