React Native开发：文本未显示在图片下方问题求助

问题描述 #

我是React Native新手，正在开发一款支持iOS和Android的超市清单APP。当前已完成头部UI，但希望将文本放置在图片下方，新建View后文本却显示在屏幕中间，求分析布局异常的原因。

相关代码 #

import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.imageContainer}>
          <Image style={styles.logo} source={require('./assets/logo.png')} />
        </View>
        <View style={styles.menu}>
          <Image source={require('./assets/menu3.png')} />
          <Image source={require('./assets/menu2.png')} />
          <Image source={require('./assets/menu5.png')} />
          <Image source={require('./assets/menu1.png')} />
          <Image source={require('./assets/menu4.png')} />
        </View>
      </View>   
      <View style={styles.textNomList}>
        <Text style={styles.textNom}>Lista de Supermercado</Text> 
      </View>        
     
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6E04BF',
    color: '#fff', 
    alignItems: 'center',
  },
  header: {
    marginTop:62,
    flex:1,    
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'flex-start',
    height: 145,
    marginVertical: 10,
  },
  imageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft:5,
    height: 145,
  },
  logo: {
    width: 100,
    height: 140,
  },
  menu: {
    flex:1,
    flexDirection:'row',
    justifyContent:'space-between',
    marginHorizontal: 20,
    marginTop:15,
    height:145,
  },
  textNomList: {
    flex:1,
    alignItems:'flex-start',
    justifyContent:'flex-start',    
  },
  textNom: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    marginLeft: 20,
  },
});

布局异常原因 #

1. flex属性滥用：header和textNomList都设置了flex:1，在flex布局中，flex:1会让组件平分父容器（container，占满整个屏幕）的剩余空间，导致两者各占屏幕一半高度，文本自然出现在屏幕中间区域。
2. 对齐方式冲突：container设置了alignItems:'center'，会让所有子元素水平居中，即使textNomList设置了alignItems:'flex-start'，但因为textNomList未设置宽度，默认仅包裹内容，左对齐效果无法体现。

修复方案 #

修改样式文件中的关键属性：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#6E04BF',
    color: '#fff', 
    // 若需文本左对齐，可去掉全局水平居中，或保留并给textNomList设置宽度100%
    // alignItems: 'center',
    paddingTop: StatusBar.currentHeight || 62, // 适配不同设备状态栏高度，替代固定marginTop
  },
  header: {
    // 移除flex:1，固定高度即可，避免拉伸占据多余空间
    // flex:1,    
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'flex-start',
    height: 145,
    marginVertical: 10,
    width: '100%', // 让header占满屏幕宽度，保证菜单布局正常
  },
  imageContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft:5,
    height: 145,
  },
  logo: {
    width: 100,
    height: 140,
  },
  menu: {
    flex:1,
    flexDirection:'row',
    justifyContent:'space-between',
    marginHorizontal: 20,
    marginTop:15,
    height:145,
  },
  textNomList: {
    // 移除flex:1，让组件仅占据自身内容高度，自然位于header下方
    // flex:1,
    alignItems:'flex-start',
    justifyContent:'flex-start',
    width: '100%', // 占满屏幕宽度，确保左对齐生效
    marginLeft: 20, // 直接给容器加左边距，替代文本的marginLeft更统一
  },
  textNom: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    // 移除文本的marginLeft，由容器统一控制
    // marginLeft: 20,
  },
});

内容的提问来源于stack exchange，提问作者Jp Grover