使用skew在反应原生中制作平行四边形

Question

我一直在与反应本地人混在一起，我正试图创建一个平行四边形。我尝试过使用skewY，但它似乎与普通旋转几乎相同。

这是我的代码：

class App extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: '#F5F1FF', flex: 1}}>
        <TouchableHighlight onPress={this.props.onForward} style={[styles.parallelogram, {backgroundColor: '#443067'}]}>
          <Text style={{color: '#F5F1FF', fontSize: 40, fontWeight: '400' }}>Alpha</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onForward} style={[styles.parallelogram, {backgroundColor: '#6A42A8'}]}>
          <Text style={{color: '#F5F1FF', fontSize: 40, fontWeight: '400' }}>Bravo</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.props.onForward} style={[styles.parallelogram, {backgroundColor: '#B485FF'}]}>
          <Text style={{color: '#F5F1FF', fontSize: 40, fontWeight: '400' }}>Charlie</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  parallelogram: {
    width: 200, 
    height: 135, 
    transform:[{skewY:'-30deg'}], 
    justifyContent:'center', 
    alignItems:'center',
  },
});

这里有截图，看起来像是什么。

Answer 1

根据http://browniefed.com/blog/the-shapes-of-react-native/你不能做歪斜，但必须自己创建起点和终点三角形！

在你的情况下，你也可以使用一个宽的梯形，然后将它重新定位在左边，这样它部分隐藏在梯形的左边，使它看起来像一个平行四边形...

Answer 2

您必须使用skewX来获得平行四边形：

<View style={{ transform: [{ skewX: '20deg' }] }}></View>

很遗憾，目前仅iOS