如何在浅蓝色 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 = () => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{ marginTop: 20 }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={data}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={({item}) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity style={styles.itemContainer}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.item}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.itemText}>{item.value}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={item => item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numColumns={numColumns} />&nbsp; &nbsp; &nbsp; );}const styles = StyleSheet.create({&nbsp; &nbsp; itemContainer: {&nbsp; &nbsp; &nbsp; width: size,&nbsp; &nbsp; &nbsp; height: size&nbsp; &nbsp; },&nbsp; &nbsp; item: {&nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; &nbsp; alignItems: 'center',&nbsp; &nbsp; &nbsp; margin: 15,&nbsp; &nbsp; &nbsp; backgroundColor: 'lightblue'&nbsp; &nbsp; },&nbsp; &nbsp; itemText: {&nbsp; &nbsp; &nbsp; fontSize: 25,&nbsp; &nbsp; &nbsp; textAlign: 'center',&nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; color: 'white',&nbsp; &nbsp; }&nbsp; });

Answer 2

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

Answer 3

请附上截图，询问有关在 React Native 中进行设计的问题。来到答案你可以试试这个。item:{&nbsp; &nbsp; &nbsp; alignSelf: 'center',&nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; margin: 15,&nbsp; &nbsp; &nbsp; fontSize: 25,&nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; color: 'white',&nbsp; &nbsp; &nbsp; backgroundColor: 'lightblue'},itemContainer: {&nbsp; &nbsp; &nbsp; width: size,&nbsp; &nbsp; &nbsp; height: size,&nbsp; &nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; &nbsp; alignItems: 'center'},