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

Question

这是 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>

Answer 1

试试这个

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