如何在特定位置的圖像頂部設置反應本機圖像

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