我已经寻找一段时间关于如何在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"
}
});