Wie man ein reaktives natives Bild oben auf dem Bild an einer bestimmten Position einstellt

Question

In React Native Framework muss ich ein Bild und einige andere Bilder oben auf dem Bild an einer bestimmten Position zeigen.

zum Beispiel in Bild unten gibt es Quellbild und drei Bilder oben auf, dass mit linkem und oberen Wert

mir jemand diesen Codes für implementieren kann helfen ???

Answer 1

Ich glaube, dass Sie einfach das Bild korrekt verwenden müssen position: 'absolute' mit den richtigen top und left Werte. Unten ist ein Beispiel.

HINWEIS: Wenn die Bilder aus dem Netzwerk stammen (so dass Sie die Größe nicht vorher kennen), können Sie das Bild inline ex formatieren. style={{ width: img.width, height: img.height }} nach der Bildgröße zu holen (React Native Retrieve Actual Image Sizes)

import { Dimensions, StyleSheet, View, Image } from 'react-native'; 

const { width, height } = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    background: { 
    width, 
    height 
    }, 
    blue: { 
    position: 'absolute', 
    top: 10, 
    left: 10, 
    width: 200, 
    height: 200 
    }, 
    green: { 
    position: 'absolute', 
    top: 100, 
    left: 200, 
    width: 200, 
    height: 200 
    }, 
    red: { 
    position: 'absolute', 
    top: 400, 
    left: 150, 
    width: 200, 
    height: 200 
    } 
}); 

const Demo =() => (
    <View style={styles.container}> 
    <Image 
     style={styles.background} 
     source={{ uri: 'http://via.placeholder.com/1080x1920' }} 
    /> 
    <Image 
     style={styles.blue} 
     source={{ uri: 'http://via.placeholder.com/200/0000ff' }} 
    /> 
    <Image 
     style={styles.green} 
     source={{ uri: 'http://via.placeholder.com/200/008000' }} 
    /> 
    <Image 
     style={styles.red} 
     source={{ uri: 'http://via.placeholder.com/200/ff0000' }} 
    /> 
    </View> 
); 

export default Demo; 

ERGEBNIS:

Answer 2

Sie absolute Positionen für die anderen drei Bilder verwenden können, die auf dem ersten Bild zeigt:

prüfen der Code unten:

export default class AbsoluteImages extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <View style={{ flex:1 }}> 
     <View style={{backgroundColor:"red" , flex:1}}> 
     </View> 
     <View style={{backgroundColor:"blue" , position:"absolute" , left:20 , top:50 , width:100,height:100}}> 
     </View> 
     <View style={{backgroundColor:"yellow" , position:"absolute" , left:120 , top:160 , width:100,height:100}}> 
     </View> 
     <View style={{backgroundColor:"green" , position:"absolute" , left:50 , top:300 , width:100,height:100}}> 
     </View> 
     </View> 
    ); 
    } 
}