在android上绘制三角形

Question

您好我需要绘制一个三角形。我用这种风格

  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',

    borderTopWidth: 20,
    borderRightWidth: 40,
    borderBottomWidth: 20,
    borderLeftWidth: 0,
    borderTopColor: 'transparent',
    borderRightColor: '#FF0000',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
  },

在IOS上它完美无缺。但Android没有显示任何内容。我使用RN 0.24.1 谁能帮我？ 谢谢！

Answer 1

试试这个

<强>的js

var Triangle = React.createClass({
  render: function() {
    return (
      <View style={[styles.triangle, this.props.style]} />
    )
  }
})

你的 css 会有点像这样：

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

它会给你这样的输出：

参考Shapes in react native

Answer 2

height: 10, 
width: 10, 
transform: [ 
  { rotate: '45deg' }, 
  { translateY: -7 }, 
], 

它不是最好的，但它有效。