Как центрировать текст внутри флексбокса lightblue? - PullRequest
Новая
       13

Как центрировать текст внутри флексбокса lightblue?

0 голосов
/ 30 сентября 2019 
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: «центр» может выравнивать текст по горизонтали.

Ответы [ 3 ]

1 голос
/ 30 сентября 2019

попробуй вот так. 

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',
    }
  });
0 голосов
/ 30 сентября 2019

В классе itemContainer отсутствует свойство display: flex. Это необходимо для использования свойств flexbox на элементах flex.

0 голосов
/ 30 сентября 2019

Пожалуйста, приложите скриншот, задавая вопросы по проектированию в реагировать родной. Приходя к ответу вы можете попробовать это. 

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