javascript 如何使用react-native绘制梯形？

jobtbby3 于 2023-04-28 发布在 Java

关注(0)|答案(3)|浏览(178)

这是CSS在ID工作正常的代码：

border-bottom: 100px solid #0000ff80;
border-right: 50px solid transparent;
height: 0;
width: 100px;

<div id="trapezoid"></div>

但是我在react-native上的代码不起作用：

<View style={{width:100,height:0,borderBottomWidth:100,borderBottomColor:'#000',borderLeftWidth:0,borderRightWidth:50,borderRightColor:'#000'}}>

</View>

JavaScript

来源：https://stackoverflow.com/questions/54647362/how-to-draw-a-trapezium-trapezoid-with-react-native

3条答案

按热度按时间

mwngjboj1#

试试这个

var Trapezoid = React.createClass({
 render: function() {
return (
  <View style={styles.trapezoid} />
 )
}
})

trapezoid: {
 width: 200,
 height: 0,
 borderBottomWidth: 100,
 borderBottomColor: 'red',
 borderLeftWidth: 50,
 borderLeftColor: 'transparent',
 borderRightWidth: 50,
 borderRightColor: 'transparent',
 borderStyle: 'solid'
}

对于更多这样的形状结帐https://codedaily.io/tutorials/22/The-Shapes-of-React-Native

赞(0）回复(0）举报 2023-04-28

qvk1mo1f2#

你可以通过一个矩形和一个三角形的行来实现它。

<View style={{ flexDirection: 'row' }}>
   <View style={styles.rectangle} />
   <View style={[styles.triangle, styles.triangleCornerBottomLeft]} />
</View>

const styles = StyleSheet.create({
  rectangle: { width: 100, height: 100, backgroundColor: 'red' },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red'
  },
  triangleCornerBottomLeft: {
    transform: [
      {rotate: '270deg'}
    ]
  },
});

赞(0）回复(0）举报 2023-04-28

u3r8eeie3#

你可以通过在x轴上旋转来实现

<View style={styles.container}>
  <View style={styles.trapezium}></View>
</View>
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'gray',
  },
  trapezium: {
    height: 300,
    width: 200,
    backgroundColor: 'white',
    transform: [{rotateX: '60deg'}],
  },
});

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 如何使用react-native绘制梯形？

3条答案

相关问题

热门标签

最新问答