📅  最后修改于: 2023-12-03 15:19:43.852000             🧑  作者: Mango
In React Native, è possibile sovrapporre immagini utilizzando il componente Image
insieme a alcuni stili CSS. Ecco come farlo:
Assicurarsi di avere le immagini necessarie importate nel progetto.
Importare il componente React Native Image
nel file in cui si desidera sovrapporre le immagini:
import { Image } from 'react-native';
Image
nel render del componente genitore:render() {
return (
<Image source={require('./path/to/image1.png')} style={styles.image} />
<Image source={require('./path/to/image2.png')} style={styles.image} />
);
}
const styles = StyleSheet.create({
image: {
position: 'absolute',
top: 0,
left: 0,
width: 200,
height: 200,
},
});
È possibile regolare le posizioni delle immagini modificando i valori degli stili CSS top
e left
. È inoltre possibile regolare le dimensioni delle immagini modificando i valori di width
e height
.
Ecco un esempio completo di come sovrapporre due immagini:
import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Image source={require('./path/to/image1.png')} style={styles.image} />
<Image source={require('./path/to/image2.png')} style={styles.image} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
image: {
position: 'absolute',
top: 0,
left: 0,
width: 200,
height: 200,
},
});
export default App;
Questo esempio sovrapporrà due immagini all'interno di un componente View
, posizionandole entrambe nell'angolo superiore sinistro con dimensioni di 200x200 pixel ciascuna.
Assicurarsi di sostituire './path/to/image1.png'
e './path/to/image2.png'
con i percorsi reali delle immagini nel progetto.