スキューを使って反応ネイティブで平行四辺形を作る

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/によると！

台形の幅が広い台形を使用して左に移動すると、台形の左側が部分的に隠れて平行四辺形に見えるようになります。