Question

出于对上帝的爱，我在样式表上所做的每个样式都没有任何改变。

我尝试设置视图，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和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,
  },
});

Answer 2

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

https://snack.expo.io/HJY7IWsFm

其他选项是使用GridView库：

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

反应本机对齐图标和文本

2 个答案: