React Native Image组件占用空间过大问题求助

你的问题出在给Image组件设置了flex:1——这个属性会让它抢占父容器的所有可用空间，直接把按钮等其他组件挤到屏幕外。下面是两种简单的解决方式：

方案1：给Image设置固定/比例化尺寸 #

移除flex:1，改用固定宽高或者基于屏幕比例的尺寸，同时保留resizeMode:'contain'保证图片比例正确：

// 先导入Dimensions获取屏幕尺寸
import { Dimensions } from 'react-native';
const screenWidth = Dimensions.get('window').width;

// 样式修改
imagem:{
    width: screenWidth * 0.7, // 占屏幕宽度的70%，可按需调整
    height: screenWidth * 0.7, // 保持正方形比例，匹配图片本身比例
    resizeMode: 'contain'
}

方案2：调整父容器的布局约束 #

给包裹Image的父View添加布局规则，限制Image的可用空间，比如给父View设置元素间隙或最大高度：

// 父View样式
contentWrapper:{
  alignItems: 'center',
  gap: 20, // 给元素之间添加间隙
  maxHeight: '70%', // 限制父容器最大高度，避免Image过度占用空间
}

修改后的完整代码示例 #

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

const screenWidth = Dimensions.get('window').width;

export default function App() {  
const moedas = [
    require('./imagens/m1.png'),
    require('./imagens/m5.png'),
    require('./imagens/m1.png'),
    require('./imagens/m2.png'),
    require('./imagens/m3.png'),
    require('./imagens/m4.png'),
    require('./imagens/m5.png'),
    require('./imagens/m6.png'),
    require('./imagens/m7.png'),
    require('./imagens/m8.png'),
  ]

  let iMoeda = 0
  const maxGiros = 20

  const [moedaAtual,setMoedaAtual] = useState(moedas[iMoeda])

  async function espera(tmp) {
    function tempo(ms) {
      return new Promise(resolve => setTimeout(resolve,ms))
    }
    await tempo(tmp)
  }

  async function girarMoeda() {
    
  }  
return (
    <SafeAreaView style={estilos.container}>
      <View style={estilos.contentWrapper}>
        <Text style={estilos.title}>Cara ou Coroa</Text>
        <Image style={estilos.imagem} source={moedaAtual}/>
        <Button
          title='Girar'
          onPress={()=>{}}
        />
      </View>
    </SafeAreaView>
  );
}

const estilos = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  contentWrapper:{
    alignItems: 'center',
    gap: 20,
  },
  title:{
    fontSize: 24,
    fontWeight: 'bold',
  },
  imagem:{
    width: screenWidth * 0.7,
    height: screenWidth * 0.7,
    resizeMode: 'contain'
  }
});

这样修改后，图片会保持合适的大小，同时标题和按钮也能正常显示在屏幕上。

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