web-dev-qa-db-ja.com

ReactネイティブのCSS三角形

triangle

私は他のコンテナー/ divをオーバーレイする三角形を使用するアプリに取り組んでいます。以前にCSSでそれを解決していました：

.triangle:after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: -15px;
  width: 0;
  border-width: 0px 0px 15px 15px;
  border-style: solid;
}

Reactこれ以上機能しません。ここに行くのに最適な解決策は何ですか？

cssreactjsreact-nativestylesheet
16
Patrick

CSSトリックを使用してReact Nativeで三角形を描画することは依然として可能です。これをカプセル化するクラスを作成しました： https://github.com/Jpoliachik/react-native-三角形

自分で作成したい場合は、このツールを使用しました： http://apps.eky.hk/css-triangle-generator/ 必要な三角形を生成し、スタイルを=に変更しましたReactネイティブ構文。

たとえば、CSSで上向きの二等辺三角形90x90は次のようになります。

width: 0;
height: 0;
border-style: solid;
border-width: 0 45px 90px 45px;
border-color: transparent transparent #007bff transparent;

しかし、React Nativeでは、スタイルは次のようになります。

triangle: {
     width: 0,
     height: 0,
     backgroundColor: 'transparent',
     borderStyle: 'solid',
     borderTopWidth: 0,
     borderRightWidth: 45,
     borderBottomWidth: 90,
     borderLeftWidth: 45,
     borderTopColor: 'transparent',
     borderRightColor: 'transparent',
     borderBottomColor: 'red',
     borderLeftColor: 'transparent',
   },
32
Jpoliachik
render() {
    return (
        <View style={[styles.triangle,styles.arrowUp]}/>
    );
}

そしてスタイル

const styles = {
    triangle: {
        width: 0,
        height: 0,
        backgroundColor: 'transparent',
        borderStyle: 'solid',
    },
    arrowUp: {
        borderTopWidth: 0,
        borderRightWidth: 30,
        borderBottomWidth: 30,
        borderLeftWidth: 30,
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: "tomato",
        borderLeftColor: 'transparent',
    },
    arrowRight: {
        borderTopWidth: 30,
        borderRightWidth: 0,
        borderBottomWidth: 30,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: "tomato",
    },
    arrowDown: {
        borderTopWidth: 30,
        borderRightWidth: 30,
        borderBottomWidth: 0,
        borderLeftWidth: 30,
        borderTopColor: "tomato",
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowLeft: {
        borderTopWidth: 30,
        borderRightWidth: "tomato",
        borderBottomWidth: 30,
        borderLeftWidth: 0,
        borderTopColor: 'transparent',
        borderRightColor: "tomato",
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowUpLeft: {
        borderTopWidth: 30,
        borderRightWidth: "tomato",
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderTopColor: "tomato",
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowUpRight: {
        borderTopWidth: 0,
        borderRightWidth: "tomato",
        borderBottomWidth: 30,
        borderLeftWidth: 0,
        borderTopColor: 'transparent',
        borderRightColor: "tomato",
        borderBottomColor: 'transparent',
        borderLeftColor: 'transparent',
    },
    arrowDownLeft: {
        borderTopWidth: 30,
        borderRightWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: 'transparent',
        borderLeftColor: "tomato",
    },
    arrowDownRight: {
        borderTopWidth: 0,
        borderRightWidth: 0,
        borderBottomWidth: 30,
        borderLeftWidth: "tomato",
        borderTopColor: 'transparent',
        borderRightColor: 'transparent',
        borderBottomColor: "tomato",
        borderLeftColor: 'transparent',
    },
}

ソース： https://github.com/Jpoliachik/react-native-triangle

4
Mahdi Bashirpour

専用ライブラリを使用しないのはなぜですか？ https://github.com/react-native-community/react-native-svg

1
Yaron Levi