React native 反应本机对齐图标和文本

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

我尝试了样式化视图、sectionheader和sectionbox，但没有成功

我想将方框部分的4个图标和下面的文本对齐，请提供帮助

导出默认类扩展组件{
render（）{
返回(
汉堡
const styles=StyleSheet.create({
图标：{
flexDirection:'行'，
paddingTop:7，
paddingLeft:5，
},
章节正文：{
尺寸：15，
fontWeight:'粗体'，
paddingLeft:5，
对齐项目：“居中”，
}
});

对于包含框的图标，您需要指示flexDirection和flexWrap，而不是直接在图标的样式上。然后，要获得每个图标下方的文本，您需要在其自己的视图中包装图标和文本，并给出“列”方向

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
从“@expo/vector icons”导入{Ionicons}；
从“expo”导入{Constants}；
常量图标大小=70；
常量字体大小=18；
常量getItem=（）=>(
名称
);
导出默认类App扩展React.Component{
render（）{
返回(
{getItem（）}
{getItem（）}
{getItem（）}
{getItem（）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
},
iconContainer：{
宽度：图标大小*2，
flexDirection:'行'，
flexWrap:“wrap”，
},
iconStyle：{
flexDirection:'列'，
对齐项目：“居中”，
填充：5，
},
文本样式：{
字体大小：字体大小，
},
})；

对于每组图标和文本，您需要一个视图，其中包含一个

flexDirection:“column”

，对于每一行（或列），需要一个视图，如下例所示：

其他选项是使用GridView库：

 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',
          }


        });