溢出：隱藏在圖像背景上不起作用

Question

<ImageBackground
                  source={require('../../assets/frame.png')}
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: 50,
                    width: 50
                  }}
                >
                  <Image
                    source={
                      userData && userData?.avatar
                        ? { uri: userData?.avatar }
                        : require('../../assets/avatar.png')
                    }
                    style={{
                      height: '100%',
                      width: '100%'
                    }}
                  />
                </ImageBackground>

我正在嘗試將圖像放在框架內並刪除溢出，我該如何實現？ 你可以看到它延伸到框架之外

Answer 1

看到問題是框架本身並沒有占據整個空間，因為它是一個圖像，並且背景圖像不尊重溢出：這是解決方案

我剛剛制作了 resizeMode = "contain" 並相對降低了玩家圖像的高度。

希望它有效，請隨時提出疑問：

 import * as React from 'react'; import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native'; import Constants from 'expo-constants'; // You can import from local files import AssetExample from './components/AssetExample'; // or any pure javascript modules available in npm import { Card } from 'react-native-paper'; export default function App() { return ( <View style={styles.container}> <ImageBackground source={require('./assets/frame.png')} style={{ justifyContent: 'center', alignItems: 'center', height: 100, width: 100, overflow:'hidden', backgroundColor:'yellow' }}> <Image source={require('./assets/1659513190.png')} style={{ height: '90%', width: '100%', overflow:'hidden', marginBottom:10 }} resizeMode="contain" /> </ImageBackground> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, // justifyContent: 'center', alignItems:"center", paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, }, }); [![enter image description here][2]][2]