특정 위치의 이미지 위에 반응하는 네이티브 이미지를 설정하는 방법

Question

React 네이티브 프레임 워크에서 특정 위치의 이미지 위에 이미지와 다른 이미지를 표시해야합니다. 예를 들어

, 아래 이미지의 원본 이미지와이 코드를 구현하기위한

누군가가 나를 도울 수 왼쪽과 최고 값을 그 위에 세 가지 이미지가있다 ???

Answer 1

정확하게 position: 'absolute'과 top 및 left 값을 사용하여 올바르게 이미지 스타일을 지정해야한다고 생각합니다. 아래는 그 예입니다.

참고 : 이미지가 네트워크에있는 경우 (미리 크기를 모를 경우) 이미지를 인라인으로 스타일을 지정할 수 있습니다. style={{ width: img.width, height: img.height }} 이미지 크기 (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; 

결과 :

Answer 2

당신은 첫 번째 이미지의 상단에 표시됩니다 다른 3 개 이미지의 절대 위치를 사용할 수 있습니다

확인 아래 코드 :

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> 
    ); 
    } 
}