反応ネイティブSVGを使っている破線をつくる方法

概要
あなたがおそらくアプリケーションに追加する必要があることの1つはダッシュラインです、そして、明らかに、あなたが状況のいずれかでそれを実行したいならば、このためのライブラリが明らかにあります、そして、最近、あなたはそれを使用したいならば、このオプションがすでにあるライブラリを持っています.
しかし、時々、私たちはもう少しコントロールをするのが好きです、あるいは、あなたは単にSVGの作成に依存性を持っていて、もう一つをインストールしたくありません.今日、我々はどのように我々は反応ネイティブのSVGを使用して簡単なダッシュラインを作成することを説明するつもりです.

コードしましょう
次の依存関係をインストールしましょう.

npm install react-native-svg

今、コンポーネントの操作を開始できます.

// @src/App.js
import React from 'react';

const App = () => {
  return (
    // ...
  );
};

export default App;

今、SVG、G(グループ)とRECT(Rectangle)をインポートネイティブのSVGからインポートしましょうので、ダッシュラインで作業を開始できます.

// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    // ...
  );
};

export default App;

最初に、我々がしていることの視覚的な考えを得るために、一つの線をつくりましょう.しかし、その前に、SVGタグを使用して、使用されるスクリーンスペースを最初に確立しましょう.

// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    <Svg height="11" width="100%">
      // ...
    </Svg>
  );
};

export default App;

今のところ、我々は画面上に1つだけダッシュをしようとしているので、G(グループ)タグを使用するつもりはありません.このためにrectタグを使用します.また、背景色と幅を指定します.

// @src/App.js
import React from 'react';
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

次のような結果が得られます.

現在、我々はスクリーンの幅全体を占める線を持ちたいです、そして、ダッシュの数はモバイルスクリーンの幅によって、ダイナミックでなければなりません.
そのために我々は反応ネイティブから寸法をインポートし、我々はちょうど画面の幅の値を取得します.それから、私たちはダッシュの間の間隔のために値を設定するので、私はスクリーンで均一に分割されました.

// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  // ...
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

現在、我々は長さが間隔によって分割されるスクリーン幅の値である配列をつくらなければなりません.

// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  const dashes = new Array(Math.floor(width / spacing)).fill(null);
  return (
    <Svg height="11" width="100%">
      <Rect
        x="11"
        y="10"
        width="10"
        height="1"
        fill="#FED049"
      />
    </Svg>
  );
};

export default App;

今回はGタグを使いましょう.今回はダッシュの配列を考慮したマッピングを行います.RECTでは、キー値は要素のインデックス値となり、インデックスに乗算された間隔の値となるprops translatexを使用します.

// @src/App.js
import React from 'react';
import { Dimensions } from "react-native";
import Svg, { G, Rect } from "react-native-svg";

const App = () => {
  const { width } = Dimensions.get("screen");
  const spacing = 16;

  const dashes = new Array(Math.floor(width / spacing)).fill(null);
  return (
    <Svg height="11" width="100%">
      <G>
        {dashes.map((_, index) => (
          <Rect
            key={index}
            x="11"
            y="10"
            width="10"
            height="1"
            fill="#FED049"
            translateX={spacing * index}
          />
        ))}
      </G>
    </Svg>
  );
};

export default App;

次のような結果が得られます.


結論
いつものように、あなたはそれが面白いと思います.あなたがこの記事のどんなエラーにでも気づくならば、コメントで彼らに言及してください.🧑🏻‍💻
この動画はお気に入りから削除されています.🙌