Javascript 如何在React native中绘制图像中的矩形

我一直在寻找关于如何使用react native在图像中绘制矩形的参考资料，但我什么也没找到

我试着做的是，将函数、照片和矩形对角线顶点的坐标作为参数传递，然后返回绘制矩形的图像。我怎么能这么做

---

简单地思考。。就像用背景色创建div一样。 下面是一个例子：

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.rectangle}></View>
        <Image source={require('assets/snack-icon.png')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    position: 'relative',
  },
  rectangle: {
    height: 128,
    width: 128,
    backgroundColor: 'salmon',
    position: 'absolute', 
    zIndex: 99,
    top: '50%',
    left: '40%'
  },

});

import * as React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

export default class App extends React.Component {
  renderImage = (topPosition, bottomPosition, leftPosition, rightPosition) => {
    return (
      <View style={styles.imageContainer}>
        <Image
          source={{
            uri:
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzwZW9gvrxF2McRF-wP5TxCIBU_3fA2XDl9DESsm1uqowjSvZ1"
          }}
          style={styles.image}
          resizeMode="stretch"
        />
        <View
          style={[
            styles.rectangle,
            {
              top: topPosition,
              bottom: bottomPosition,
              left: leftPosition,
              right: rightPosition
            }
          ]}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>{this.renderImage(80, 55, 30, 70)}</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  imageContainer: {
    width: 300,
    height: 250,
    alignSelf: "center"
  },
  image: {
    width: 300,
    height: 250
  },
  rectangle: {
    borderWidth: 3,
    borderColor: "red",
    position: "absolute"
  }
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、图像}；
从“expo”导入{Constants}；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
位置：'相对'，
},
矩形：{
身高：128，
宽度：128，
背景颜色：“鲑鱼”，
位置：'绝对'，
zIndex:99，
前50%，
左：“40%”
},
});

结果:

---

创建一个视图，将图像和视图（矩形框）作为子视图。通过将绝对位置设置为矩形，将矩形框放置在图像上。要定位，必须为顶部、底部、左侧和右侧设置矩形样式值。我创建了一个传递位置值的函数

检查此示例：

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.rectangle}></View>
        <Image source={require('assets/snack-icon.png')} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    position: 'relative',
  },
  rectangle: {
    height: 128,
    width: 128,
    backgroundColor: 'salmon',
    position: 'absolute', 
    zIndex: 99,
    top: '50%',
    left: '40%'
  },

});

import * as React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

export default class App extends React.Component {
  renderImage = (topPosition, bottomPosition, leftPosition, rightPosition) => {
    return (
      <View style={styles.imageContainer}>
        <Image
          source={{
            uri:
              "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzwZW9gvrxF2McRF-wP5TxCIBU_3fA2XDl9DESsm1uqowjSvZ1"
          }}
          style={styles.image}
          resizeMode="stretch"
        />
        <View
          style={[
            styles.rectangle,
            {
              top: topPosition,
              bottom: bottomPosition,
              left: leftPosition,
              right: rightPosition
            }
          ]}
        />
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>{this.renderImage(80, 55, 30, 70)}</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  imageContainer: {
    width: 300,
    height: 250,
    alignSelf: "center"
  },
  image: {
    width: 300,
    height: 250
  },
  rectangle: {
    borderWidth: 3,
    borderColor: "red",
    position: "absolute"
  }
});

import*as React from“React”；
从“react native”导入{文本、视图、样式表、图像}；
导出默认类App扩展React.Component{
渲染图像=（顶部位置、底部位置、左侧位置、右侧位置）=>{
返回(
);
};
render（）{
返回(
{这个渲染（80,55,30,70）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
背景色：“ecf0f1”，
填充：8
},
图像容器：{
宽度：300，
身高：250，
自我定位：“中心”
},
图片：{
宽度：300，
身高：250
},
矩形：{
边框宽度：3，
边框颜色：“红色”，
位置：“绝对”
}
});