javascript - 如何在 React Native 中的图像中绘制矩形

Question

一段时间以来，我一直在寻找有关如何使用本机反应在图像中绘制矩形的参考资料，但我一无所获。

我尝试做的事情是像将函数、照片和矩形对角线顶点的坐标作为参数传递，然后返回带有该绘制矩形的图像。我怎么能那样做？

例子

标签： javascriptimagereact-native

Answer 1

想得简单..就像用背景颜色创建 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%'
  },

});

结果：