android - touchablefeedback - react native value




React Native에서 어떻게 대각선 테두리를 만들 수 있습니까? (2)

저는 디자이너의 디자인을 기반으로 React Native 앱을 만드는 중입니다. 이 디자인에는 대각선이 하나있는 단추 또는 모양이있는 여러 위치가 있습니다 (다음 예 참조). 나는 SkewX 사용해 SkewX , 그것은 단지 전체 모양을 회전시키는 것처럼 보이고 (어쨌든 안드로이드에서는 작동하지 않는 것 같다). 한면에 대각선 테두리가있는 사각형 / 단추를 그릴 수 있습니까?


그런 모양의 CALayer 를 사용하십시오.

그 아래 코드 :

    let layer = CAShapeLayer()
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: 150, y: 0))
    path.addLine(to: CGPoint(x: 100, y: 50))
    path.addLine(to: CGPoint(x: 0, y: 50))
    path.close()
    layer.path = path.cgPath
    layer.fillColor = UIColor.green.cgColor
    layer.strokeColor = UIColor.clear.cgColor
    view.layer.addSublayer(layer)

    let layer1 = CAShapeLayer()
    path.move(to: CGPoint(x: 100, y: 45))
    path.addLine(to: CGPoint(x: 300, y: 45))
    path.addLine(to: CGPoint(x: 350, y: 5))
    path.addLine(to: CGPoint(x: 150, y: 5))
    path.close()
    layer1.path = path.cgPath
    layer1.fillColor = UIColor.clear.cgColor
    layer1.strokeColor = UIColor.black.cgColor
    view.layer.addSublayer(layer1)

View 클래스에 CSS를 적용하고 원하는 출력을 만들 수 있습니다. Heres 작은 데모 코드 편집 버전

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={styles.triangleCorner}></View>
        <View style={styles.triangleCornerLayer}></View>
         <View style={styles.triangleCorner1}></View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },triangleCorner: {
    position: 'absolute',
    top:105,
    left:0,
    width: 300,
    height: 100,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 50,
    borderTopWidth: 80,
    borderRightColor: 'transparent',
    borderTopColor: 'gray'
  },triangleCorner1: {
    position: 'absolute',
    top:100,
    left:0,
    width: 130,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 50,
    borderTopWidth: 90,
    borderRightColor: 'transparent',
    borderTopColor: 'green'
  },triangleCornerLayer: {
    position: 'absolute',
    top:107,
    left:0,
    width:297,
    height: 100,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 47,
    borderTopWidth: 75,
    borderRightColor: 'transparent',
    borderTopColor: 'white'
  }
});

결과:





expo