使用歪斜做出反應原生平行四邊形

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/你不能這樣做，但歪斜必須創建開始和結束三角形自己！

你的情況，你也可以使用一個梯形那就是寬，然後將其重新定位到左側，因此部分隱藏了梯形的左邊，使它看起來像一個平行四邊形...