React Native - 调整图像组件大小

Question

我在 React Native 中有一个应用程序，我试图在我的应用程序中引入一张图像，但该图像太大并且图像占据了整个屏幕。为了解决这个问题，我尝试了

imagem:{
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
  }

图像本身的尺寸很好，但组件太大，所以很难看到其他组件。

完整脚本在这里：

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

export default function App() {  
  return (
    <SafeAreaView style={estilos.container}>
      <View>
        <Text>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',
  },
  imagem:{
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
  }
});

Answer 1

您可以从 estilos.imagem 中删除 flex: 1 属性

const estilos = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imagem:{
    width: null,
    height: null,
    resizeMode: 'contain'
  }
});