如何在特定位置的图像顶部设置反应本机图像

Question

在React Native框架中，我需要在特定位置的图像顶部显示图像和一些其他图像。

例如，在下面的图像有源图像和最重要的是与左侧和顶部值三个图像

任何人都可以帮我实现这个代码???

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