如何在特定位置的图像顶部设置反应原生图像

Question

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

例如，在下面的图像中，有源图像和三个图像，顶部带有左值和顶值

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

Answer 1

我相信您只需要使用position: 'absolute'正确top和left值来正确设置图像样式。以下是一个例子。

注意：如果图片来自网络（因此您事先并不知道尺寸），您可以将图片设置为内联样式。获取图像大小（React Native Retrieve Actual Image Sizes）

后style={{ width: img.width, height: img.height }}

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