反应原生对齐图标和文本答案

【问题标题】：React native align icon and text反应原生对齐图标和文本
【发布时间】：2018-09-28 10:23:53
【问题描述】：

看在上帝的份上，我在样式表上添加的每个样式都不会改变任何东西。

我尝试设置视图、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',
          }


        });

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

对于包含图标的框，您需要指示 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,
  },
});

【讨论】：

【解决方案2】：

您需要为每组带有flexDirection: 'column' 的图标和文本创建一个视图，并为每一行（或列）创建一个视图，如下例所示：

https://snack.expo.io/HJY7IWsFm

其他选项是使用 GridView 库：

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

【讨论】：