Реагировать на родную иконку выравнивания и текст

Question

ради любви к Богу, каждый стиль, который я добавляю в таблицу стилей, ничего не меняет.

я пробовал стилизовать view, sectionheader & sectionbox, но не повезло

я хочу выровнять4 иконки в поле и текст ниже, поэтому, пожалуйста, любая помощь будет оценена.

 export default class HomePage extends Component {
      render() {
        return (
          <View> 

            <SectionHeader title={'Food'} />
            <View >
             <SectionBox >
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />

                <Text style={styles.sectiontext}>burgers</Text>
              </SectionBox>
            </View>

        const styles = StyleSheet.create({
          icons: {
            flexDirection: 'row',
            paddingTop: 7,
            paddingLeft: 5,



          },
          sectiontext: {
            fontSize: 15,
            fontWeight: 'bold',
            paddingLeft: 5,
            alignItems: 'center',
          }


        });

Answer 1

Вам необходимо представление для каждой группы значков и текста с flexDirection: 'column' и одно представление для каждой строки (или столбца), как в примере ниже:

https://snack.expo.io/HJY7IWsFm

Другой вариант - использовать библиотеку GridView:

https://github.com/saleel/react-native-super-grid

Answer 2

Для поля, содержащего значки, вам нужно указать flexDirection и flexWrap, а не прямо в стиле иконки.Затем, чтобы получить текст под каждым значком, вам нужно обернуть значок и текст в отдельное представление и указать направление этого «столбца».

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Constants } from 'expo';

const ICON_SIZE = 70;
const FONT_SIZE = 18;

const getItem = () => (
  <View style={styles.iconStyle}>
    <Ionicons name="md-checkmark-circle" size={ICON_SIZE} color="green" />
    <Text style={styles.textStyle}>name</Text>
  </View>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.iconContainer}>
          {getItem()}
          {getItem()}
          {getItem()}
          {getItem()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconContainer: {
    width: ICON_SIZE * 2,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  iconStyle: {
    flexDirection: 'column',
    alignItems: 'center',
    padding: 5,
  },
  textStyle: {
    fontSize: FONT_SIZE,
  },
});