React Native中图片无法自适应屏幕尺寸，遮挡文本问题求助

我帮你梳理下问题所在，然后给出直接的解决方案——你的核心需求是让长文本居中，同时图片按比例适配屏幕、居中显示在文本下方，问题主要出在长文本的布局控制和图片的尺寸约束上：

问题分析 #

1. 你用的长文本没有设置对齐和间距，默认情况下会占据容器的可用宽度，加上justifyContent: center，会让文本和图片的整体布局挤压在一起，甚至图片因为原始尺寸过大（splash.png通常是启动图，尺寸远大于屏幕）直接超出可视范围。
2. 教程里的icon.png尺寸很小，所以不需要额外约束就能正常显示，但你的splash.png尺寸更大，必须明确限制它的显示范围才能适配屏幕。

修正后的完整代码 #

import React from 'react';
import { SafeAreaView, Text, Image, StyleSheet } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>
        Ready to Rock'n'Roll. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam at facere commodi amet qui eius est mollitia quas temporibus, dignissimos quia sapiente incidunt optio voluptatem architecto exercitationem nemo. Harum, omnis?
      </Text>
      <Image 
        source={require("./assets/splash.png")}
        style={styles.image}
        resizeMode="contain"
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 16, // 避免文本贴屏幕边缘，提升可读性
  },
  text: {
    textAlign: 'center', // 让文本内容居中对齐
    marginBottom: 24, // 给文本和图片之间留出间距
  },
  image: {
    maxWidth: '90%', // 图片最大宽度不超过屏幕的90%
    maxHeight: '50%', // 图片最大高度不超过屏幕的50%
    width: undefined, // 让宽度自适应，配合maxWidth和resizeMode
    height: undefined, // 让高度自适应，保持图片原始宽高比
  }
})

关键修改说明 #

• 文本样式优化：textAlign: 'center'让长文本的每一行都居中，marginBottom拉开和图片的距离，容器的paddingHorizontal避免文本贴到屏幕左右边缘。
• 图片尺寸约束：
  • width: undefined和height: undefined是告诉React Native不要用图片的原始尺寸，而是根据我们设置的最大范围自动计算。
  • resizeMode: 'contain'会保持图片的原始宽高比，让图片完整显示在设定的最大尺寸内，不会变形或被裁剪。
  • maxWidth和maxHeight确保图片不会超出屏幕范围，同时适配不同尺寸的iOS设备。
• 容器样式精简：去掉了多余的width: undefined和height: undefined，flex: 1已经足够让容器占满整个屏幕，这两个属性反而会干扰布局逻辑。

这样修改后，你就能在iOS模拟器上看到：文本居中换行显示，图片按比例适配屏幕，稳稳地居中在文本下方，完全符合你的需求。

内容的提问来源于stack exchange，提问作者m3c.ode