react-native - React native 对齐图标和文本

Question

看在上帝的份上，我放在样式表上的每个样式都没有改变任何东西。

我尝试设置 View 、sectionheader 和 sectionbox 的样式，但没有成功

我想对齐 boxsection 中的 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 和 flexWrap，而不是直接在图标的样式上。然后，要在每个图标下方获取文本，您需要将图标和文本包装在其自己的 View 中，并给出该“列”方向。

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,
  },
});