ReactNative: SVG'yi button olarak kullanma

2 hafta önce , Okuma süresi 1 dakika.

ReactNative ile uygulama geliştirirken SVG formatında bir görseli buton olarak kullanmak isteyebilirsiniz. İşte bu noktada ipuçları içeren bu makaleye göz atmanızı öneririm.
ReactNative: SVG'yi button olarak kullanma

Kısa bir süre önce ReactNative'i kullanmaya başladım . Yıllardır React kullanıyorum ama bu yepyeni bir dünya. Nasıl yapılacağını bilmediğim tonlarca temel şey var. SVG'yi düğme olarak kullanmak bunlardan biridir. 

Öncelikle, ReactNative projemizde SVG kodunu kopyalayıp yapıştırıp kullanamayacağımızı belirtmeliyiz. Biz kullanan zorundayız react-native-svg paketi. Örneğin SVG'm şuna benzer:

import Svg, { Path } from "react-native-svg";

const lineProps = {
  strokeOpacity: 1,
  strokeWidth: 1,
  strokeLineCap: "round",
  strokeLineJoin: "round",
};
function Button({ size }) {
  return (
    <Svg width={size} height={size} viewBox="0 0 122.88 122.88" {...lineProps}>
      <Path d="M61.44,0c16.966,0,32.326,6.877,43.445,17.995s17.996,26.479,17.996,43.444c0,16.967-6.877,32.327-17.996,43.445 S78.406,122.88,61.44,122.88c-16.966,0-32.326-6.877-43.444-17.995S0,78.406,0,61.439c0-16.965,6.877-32.326,17.996-43.444 S44.474,0,61.44,0L61.44,0z M34.556,67.179c-1.313-1.188-1.415-3.216-0.226-4.529c1.188-1.313,3.216-1.415,4.529-0.227L52.3,74.611 l31.543-33.036c1.223-1.286,3.258-1.336,4.543-0.114c1.285,1.223,1.336,3.257,0.113,4.542L54.793,81.305l-0.004-0.004 c-1.195,1.257-3.182,1.338-4.475,0.168L34.556,67.179L34.556,67.179z M100.33,22.55C90.377,12.598,76.627,6.441,61.44,6.441 c-15.188,0-28.938,6.156-38.89,16.108c-9.953,9.953-16.108,23.702-16.108,38.89c0,15.188,6.156,28.938,16.108,38.891 c9.952,9.952,23.702,16.108,38.89,16.108c15.187,0,28.937-6.156,38.89-16.108c9.953-9.953,16.107-23.702,16.107-38.891 C116.438,46.252,110.283,32.502,100.33,22.55L100.33,22.55z" />
    </Svg>
  );
}

Bu düzgün hale getirilecek ama eklemeyi deneyin eğer onClickyoksa onPress hiç bir şekilde çalışmadığını göreceksiniz. Bir çeşit dokunulabilir ReactNative bileşeni kullanmalıyız. Ve özellikle bu amaç için yapılmış birkaç tane var. Bunun için <TouchableHighlight> kullanmaya karar verdim. Böylece benim bileşenim oldu:

import { TouchableHighlight } from "react-native";

function Button({ onPress, size }) {
  return (
    <TouchableHighlight onPress={onPress}>
      <Svg width={size} height={size} viewBox="0 0 122.88 122.88" {...lineProps}>
        <Path d="..." />
      </Svg>
    </TouchableHighlight>
  );
}

Bu işe yarıyor, ancak büyük bir sorunu var - kullanıcının tam SVG satırlarını tıklaması gerekiyor. Simgenin saydam bitleri tıklanabilir değildir. Bu sorunu çözmek için SVG'mizi bir View bileşenin içine almalıyız. Şöyle:

function Button({ onPress }) {
  return (
    <TouchableHighlight onPress={onPress}>
      <View style={{ width: size, height: size }}>
        <Svg width={size} height={size} viewBox="0 0 122.88 122.88" {...lineProps}>
          <Path d="..." />
        </Svg>
      </View>
    </TouchableHighlight>
  );
}

Bununla, simge işliyor ve tıklanabilir.

Uygulamamda, birkaç ihtiyacı karşılamak için yukarıdaki kodu genişletmem gerekiyordu. Örneğin varsayılan bir boyuta sahip olmak ve simgenin rengini dışarıdan geçirmek gibi. Ayrıca hepsi TypeScript olduğundan, benzer bir şeye ihtiyacınız olması durumunda tam bileşen burada:

import React from "react";
import { TouchableHighlight, View, GestureResponderEvent } from "react-native";
import Svg, { Path } from "react-native-svg";

const COLORS = {
  green: "#86d98c",
};

const lineProps = {
  strokeOpacity: 1,
  strokeWidth: 1,
  strokeLineCap: "round",
  strokeLineJoin: "round",
};

export function Button({
  color,
  size,
  onPress,
}: {
  color: string;
  size: number;
  onPress: (e: GestureResponderEvent) => void;
}) {
  return (
    <TouchableHighlight onPress={onPress}>
      <View style={{ width: size, height: size }}>
        <Svg width={size} height={size} viewBox="0 0 122.88 122.88" fill={COLORS.green} {...lineProps} stroke={color}>
          <Path d="..." />
        </Svg>
      </View>
    </TouchableHighlight>
  );
}

OK.defaultProps = {
  size: 50,
  color: COLORS.green,
  onPress: () => {},
};

 

#Mobil Uygulamalar #react