Ay: Aralık 2020

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 11. kısmıdır. Bir önceki makalede (Part 10), React Native’de Drag & Drop bileşenini oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Hooks ve FlatList Kullanarak Search Bar bileşenini eklemeyi ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

React Native ile mobil uygulamalar geliştirirken verileri görüntülemek için yaygın bir kullanım durumu, bir liste biçimindedir.

React Native’de liste oluşturmanın iki yaygın yolu vardır: ScrollView ve FlatList. Framework’ün API’sindeki bu bileşenlerin her birinin kendi gücü vardır.

Bu makalede, verileri almak, verileri görüntülemek ve bir arama çubuğu eklemek için FlatList tarafından sağlanan farklı unsurları inceleyelim.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Expo tabanlı yeni bir proje oluşturmak için, bir terminal penceresi açın ve aşağıdaki komutları açıklanan sırayla çalıştırın.

Proje dizini oluşturulduktan sonra lodash.filter’ı kurduğunuzdan emin olun. Paketi, daha sonra liste işlevinden bir arama eklerken verileri filtrelemek için kullanacağız.

npx expo init [Project Name]

# choose a template when prompted
# this example is using the 'blank' template

# after the project directory has been generated

cd [Project Name]

# install dependency
yarn add lodash.filter

FlatList Bileşenini Kullanma

React Native FlatList, genel performansı düşürmeden büyük miktarda veriden oluşan kaydırma listeleri oluşturmanın etkili bir yoludur. Büyük veri dizileri için optimize edilmiştir çünkü yalnızca ekranda görüntülenen bir dizi öğeyi oluşturur. Bir veri listesinde gezinirken, bileşen monte edildikten hemen sonra tüm verileri oluşturan ScrollView ile karşılaştırıldığında dahili durum korunmaz. Bu, ScrollView’daki tüm verilerin aygıtın belleğine eklendiği ve büyük miktarda veri işlenirken performansın düşmesine neden olabileceği anlamına gelir.

FlatList’e bir dizi veri iletmek, veri listesini nasıl görüntüleyebileceğinizdir. Bunun nasıl çalıştığını görelim. Örneğin, App.js’yi açın ve işlev bileşeninden önce aşağıdaki veri dizisini ekleyin.

const data = [
  { id: '1', title: 'First item' },
  { id: '2', title: 'Second item' },
  { id: '3', title: 'Third item' },
  { id: '4', title: 'Fourth item' }
];

Ardından, FlatList’i App.js dosyasında içe aktarın.

import { StyleSheet, Text, View, FlatList } from 'react-native';

FlatList, bir veri listesini görüntülemek için gerekli olan üç birincil props kullanacak:

data: bir liste oluşturmak için kullanılan bir veri dizisi. Dizi, eleman olarak birden çok nesneden oluşur.
keyExtractor: FlatList’e, dizinin tek tek öğeleri için benzersiz bir tanımlayıcı veya kimlik kullanmasını söyler.
renderItem: veri dizisinden tek bir öğeyi alan ve onu kullanıcı arayüzünde işleyen bir işlev.

Ardından, bu veri listesini döndürmek için Uygulama bileşenini değiştirin.

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Basic FlatList Example</Text>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Text style={styles.listItemText}>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

Aşağıdaki styles nesnesini ekleyin.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: '#101010',
    marginTop: 60,
    fontWeight: '700'
  },
  listItem: {
    marginTop: 10,
    padding: 20,
    alignItems: 'center',
    backgroundColor: '#fff',
    width: '100%'
  },
  listItemText: {
    fontSize: 18
  }
});

Şimdi emülatöre geri dönün ve veri dizisindeki tüm nesnelerin artık bir liste şeklinde görüntülendiğini göreceksiniz. FlatList’i kullanmak, organize verileri görüntülemek için minimum çaba gerektirir.

FlatList’te bir API’den veri alma

FlatList, mobil uygulamanın verileri nasıl getirdiğini umursamıyor. Önceki bölümde, bir dizi veriyle nasıl alay edileceğini ve bir liste olarak nasıl kullanılacağını öğrendik. Bu bölümde, verileri bir uzak API kaynağından alalım ve verileri görüntülemek için aynı kalıbı (önceki bölümde olduğu gibi) takip edelim.

Yan Not: Uzak bir API kaynağı için, Random User Placeholder API‘yi kullanacağım.

Bu bölümde kullanacağımız tüm gerekli bileşenleri içe aktararak başlayın. Aşağıdaki içe aktarma ifadelerini aşağıda gösterildiği gibi güncelleyin:

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Image
} from 'react-native';

Ardından, verileri sabit olarak almak için API endpoint URL’sini tanımlayın.

const API_ENDPOINT = `https://randomuser.me/api/?seed=1&page=1&results=20``;

API endpoint HTTP isteği şimdilik ilk 20 sonucu getirecek.

React Hook useState’i kullanarak App bileşeninin içinde üç durum değişkeni tanımlayın. isLoading durum değişkeninin boolean değeri varsayılan olarak false olacaktır. Amacı, veriler API endpoint’den getirilirken bir yükleme göstergesi görüntülemektir.

Veri değişkeni varsayılan olarak boş bir diziye sahip olacaktır. Bu durum değişkenini kullanarak, FlatList bir veri listesi görüntülemek için doldurulur.

Son durum değişkeni olan error, varsayılan bir null değerine sahip olacak. Yalnızca verileri alırken bir hata olduğunda güncellenecektir.

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  // ...
}

Sonra, React Hook useEffect’i ve JavaScript’ten alma API’sini kullanarak, verileri API_ENDPOINT’ten alalım. App bileşeninin içindeki durum değişkenlerini tanımladıktan sonra aşağıdakileri ekleyin.

UseEffect başlatıldığında yükleme değişkeni true olarak ayarlanır. Bu değişkenin boolean değeri, yalnızca verilerin getirilmesi tamamlandığında veya bir hata olduğunda false olarak ayarlanır. Aşağıdaki setData, veri değişkenini bir veri dizisi ile güncelliyor.

export default function App() {
  // state variables defined

  useEffect(() => {
    setIsLoading(true);

    fetch(API_ENDPOINT)
      .then(response => response.json())
      .then(results => {
        setData(results);
        setIsLoading(false);
      })
      .catch(err => {
        setIsLoading(false);
        setError(err);
      });
  }, []);
  // ...
}

Ardından, her biri iki farklı senaryo için bir JSX döndüren iki if koşulu ekleyin. İlk olarak, veriler getirilirken bir yükleme göstergesi gösterilir. İkinci olarak, bir hata olduğunda bir hata mesajı görüntülenir.

export default function App() {
  // state variables defined

  // fetch data using useEffect

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#5500dc" />
      </View>
    );
  }

  if (error) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 18}}>
          Error fetching data... Check your network connection!
        </Text>
      </View>
    );
  }
  // ...
}

Ardından, kullanıcı avatarını ve API endpoint’den getirilen kullanıcının adını görüntülemek için FlatList’i güncelleyin.

export default function App() {
  // ...

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Favorite Contacts</Text>
      <FlatList
        data={data}
        keyExtractor={item => item.first}
        renderItem={({ item }) => (
          <View style={styles.listItem}>
            <Image
              source={{ uri: item.picture.thumbnail }}
              style={styles.coverImage}
            />
            <View style={styles.metaInfo}>
              <Text style={styles.title}>{`${item.name.first} ${
                item.name.last
              }`}</Text>
            </View>
          </View>
        )}
      />
    </View>
  );
}

Styles nesnesini de güncellemeyi unutmayın.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: '#101010',
    marginTop: 60,
    fontWeight: '700'
  },
  listItem: {
    marginTop: 10,
    paddingVertical: 20,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
    flexDirection: 'row'
  },
  coverImage: {
    width: 100,
    height: 100,
    borderRadius: 8
  },
  metaInfo: {
    marginLeft: 10
  },
  title: {
    fontSize: 18,
    width: 200,
    padding: 10
  }
});

Bu adımdan sonra alacağımız bir FlatList kullanılarak görüntülenen kişilerin listesi aşağıdadır.

Veriler getirilirken yüklenme göstergesi burada.

Ve aşağıda, uygulamanın verileri getiremediği senaryo verilmiştir.

Search Bar Ekleme

Bu bölümde, mevcut FlatList’in en üstünde bir arama çubuğu oluşturalım. Bir arama çubuğunu görüntülemek için ListHeaderComponent adlı bir destek sağlar.

Uygulama bileşenini düzenlemeye başlamadan önce, bu adımda gerekli olan gerekli içe aktarma ifadelerini ekleyelim. React-native’den TextInput için içe aktarmayı ekleyin. Ayrıca lodash.filter dosyasını içe aktarın.

import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Image,
  TextInput
} from 'react-native';
import filter from 'lodash.filter';

Aşağıda gösterildiği gibi FlatList için prop ekleyin

<FlatList
  ListHeaderComponent={renderHeader}
  // ... rest of the props remain same
/>

Ardından, aşağıdaki JSX’i döndürecek renderHeader işlevini tanımlayın:

export default function App() {
  //...
  function renderHeader() {
    return (
      <View
        style={{
          backgroundColor: '#fff',
          padding: 10,
          marginVertical: 10,
          borderRadius: 20
        }}
      >
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          clearButtonMode="always"
          value={query}
          onChangeText={queryText => handleSearch(queryText)}
          placeholder="Search"
          style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
        />
      </View>
    );
  }
// … render JSX below
}

İşte bu adımdan sonra emülatördeki çıktı.

Ardından, iki durum değişkeni daha ekleyin. İlk olarak, sorgu, veri listesinde arama yapmak için kullanıcı tarafından sağlanan herhangi bir girdiyi takip edecektir. Varsayılan bir boş dizge değerine sahiptir. İkinci olarak, verileri filtrelemek için kullanılacak olan API’den verileri tutmak için başka bir değişken ekleyin.

const [query, setQuery] = useState('');
const [fullData, setFullData] = useState([]);

Tüm Data dizisini doldurmak için side-effect olarak useEffect’i güncelleyin.

useEffect(() => {
  setIsLoading(true);

  fetch(API_ENDPOINT)
    .then(response => response.json())
    .then(response => {
      setData(response.results);

      // ADD THIS
      setFullData(response.results);

      setIsLoading(false);
    })
    .catch(err => {
      setIsLoading(false);
      setError(err);
    });
}, []);

Ardından, search bar’ı işleyecek olan handleSearch adında bir işleyici yöntemi ekleyin. Varsayılan olarak, sorgu olarak sağlanan arama terimini küçük harfe biçimlendirecektir. Kullanıcının adı, durum değişkeni fullData’dan filtrelenirken durum değişkeni verileri, doğru kullanıcıyı oluşturmak için aramadan sonra nihai sonuçları saklar.

İçerme işleyicisi yöntemi sorguyu arayacaktır. Kullanıcının adı ve soyadı ve handleSearch() ‘den küçük harfe biçimlendirilmiş sorgu olmak üzere iki parametre kabul eder.

const handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const filteredData = filter(fullData, user => {
    return contains(user, formattedQuery);
  });
  setData(filteredData);
  setQuery(text);
};

const contains = ({ name, email }, query) => {
  const { first, last } = name;

  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }

  return false;
};

Emülatörde, bu sorguya dayalı sonuçları almak için bir arama sorgusu.

Bu makalenin odak noktası, FlatList bileşeninin sağladığı farklı donanımlara aşina olmanızı sağlamaktı.

Daha iyi sonuçlar için bir API endpoint’den veri alırken Algolia gibi güçlü bir arama sağlayıcısının kullanılması önerildiğini unutmayın.

Son olarak, hassas mantık içeren ticari React Native uygulamaları geliştiriyorsanız özel dikkat göstermeyi unutmayın. Kılavuzumuzu izleyerek onları kod hırsızlığına, kurcalanmaya ve ters mühendisliğe karşı koruyabilirsiniz.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak

1-https://blog.jscrambler.com/add-a-search-bar-using-hooks-and-flatlist-in-react-native/

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 10. kısmıdır. Bir önceki makalede (Part 9), React Native’de Redux Kullanımı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Drag & Drop bileşenini oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Bir sonraki React Native uygulamam için beyin fırtınası yaparken, işte ilk adım, bir Drag & Drop bileşenini oluşturabilmek için hareketi izleyen bir API olup olmadığını görmek istedim.
Neyse ki bulması çok zor olmadı: PanResponder’a sahibiz! Bununla hareketi soyut bir durum olarak izleyebilir ve kullanıcı arayüzümüzü buna göre güncelleyebiliriz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Nasıl bir uygulama yapmak istediğimizin kafamızda netleşmesi için aşağıdaki görsele bakabilirsiniz.

Drag Bileşen Oluşturma

PanResponder API belgelerini takip etmenin biraz zor olduğunu buldum, ancak bu örnek ve animasyon kılavuzu gitmeme yardımcı oldu. PanResponder sınıfını içe aktardıktan sonra, componentWillMount() yaşam döngüsü yönteminde .create yöntemiyle başlatırsınız. Bunu constructor() da yazabilirsiniz.

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  PanResponder,
  Animated
} from "react-native";

export default class Draggable extends Component {
  constructor() {
    super();
    this.state = {
      pan: new Animated.ValueXY()
    };
  }

  componentWillMount() {
    // Add a listener for the delta value change
    this._val = { x:0, y:0 }
    this.state.pan.addListener((value) => this._val = value);
    // Initialize PanResponder with move handling
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (e, gesture) => true,
      onPanResponderMove: Animated.event([
        null, { dx: this.state.pan.x, dy: this.state.pan.y }
      ])
      // adjusting delta value
      this.state.pan.setValue({ x:0, y:0})
    });
  }

  render() {
    const panStyle = {
      transform: this.state.pan.getTranslateTransform()
    }
    return (
        <Animated.View
          {...this.panResponder.panHandlers}
          style={[panStyle, styles.circle]}
        />
    );
  }
}

let CIRCLE_RADIUS = 30;
let styles = StyleSheet.create({
  circle: {
    backgroundColor: "skyblue",
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS
  }
});

this.panResponder = PanResponder.create(), panResponder’ı başlatır ve bir referans oluşturur. Bunu <Animate.View> bileşenimizde, bir sahne grubundan geçiyormuş gibi {… this.panResponder.panHandlers} ‘ı geçirerek kullanırız.
PanResponder.create() içinde onStartShouldSetPanResponder’ı true olarak ayarladık, böylece panResponder dokunma geri bildirimlerine yanıt verecek. Sonra onPanResponderMove’a bir Animated.event iletiriz: kullanıcının hareket ettiği Animated.View circle bileşenimizin konumunu güncellemek için.
Çevremizin konumunu elde etmek için hesaplanan animasyon değerini this.state.pan.getTranslateTransform() ‘dan alıp Animated.View’a aktardığımız bir dönüştürme stili oluşturmak için kullanırız.
Son olarak, öğenin ikinci dokunuşta atlamaması için delta değerini ayarlıyoruz.
Bu noktada, kullanıcının etkileşime girebileceği sürüklenebilir bir dairemiz var:

Çemberi İlk Konumuna Geri Döndürmek

Bileşeni bıraktıklarında dairenin orijinal konumuna geri dönmesini istiyoruz. Bunu yapmak için onPanResponderRelease’i kullanarak kullanıcı arayüzüne kullanıcı bıraktığında nasıl yanıt vereceğini bildiririz.

componentWillMount() {
  ...
    this.panResponder = PanResponder.create({
      ...
      onPanResponderRelease: (e, gesture) => {
        Animated.spring(this.state.pan, {
          toValue: { x: 0, y: 0 },
          friction: 5
        }).start();
      }
    });

Dairemiz şimdi ilk konumuna geri dönüyor:

Bırakma Alanının Oluşturulması

Artık sürüklemeye sahibiz, bırakmaya ihtiyacımız var. Bırakma alanımızla başka bir bileşen oluşturuyoruz ve içinde Sürüklenebilir bileşenimizi kullanıyoruz:

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import Draggable from "./Draggable";

export default class Screen extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.dropZone}>
          <Text style={styles.text}>Drop them here!</Text>
        </View>
        <View style={styles.ballContainer} />
        <View style={styles.row}>
          <Draggable />
          <Draggable />
          <Draggable />
          <Draggable />
          <Draggable />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  ballContainer: {
    height:200
  },
  row: {
    flexDirection: "row"
  },  
  dropZone: {
    height: 200,
    backgroundColor: "#00334d"
  },
  text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: "center",
    color: "#fff",
    fontSize: 25,
    fontWeight: "bold"
  }
});

Ardından Draggable, onPanResponderRelease işleyicisine biraz mantık ekliyoruz ve bırakma alanında olup olmadığımızı belirlemek için bir işlev ekliyoruz. Not: Burada ekrandaki bırakma bölgesinin konumu hakkında varsayımlarda bulunuyoruz.

...
  constructor()
    super.props();
    this.state = {
      showDraggable: true,
      dropAreaValues: null,
      pan: new Animated.ValueXY(),
      opacity: new Animated.Value(1)
    };
  }
  componentWillMount() {
    ...
    this.panResponder = PanResponder.create({
      ...
      onPanResponderRelease: (e, gesture) => {
        if (this.isDropArea(gesture)) {
          Animated.timing(this.state.opacity, {
          toValue: 0,
          duration: 1000
        }).start(() =>
          this.setState({
             showDraggable: false
          })
        );
      } else {
        Animated.spring(this.state.pan, {
          toValue: { x: 0, y: 0 },
          friction: 5
        }).start();
      }
    }
  isDropArea(gesture) {
    return gesture.moveY < 200;
  }

Uygulamayı çalıştırdığımızda aşağıdaki gibi bir görüntü ortaya çıkar.

PanResponder API’si ilk başta benim için biraz korkutucuydu, ancak şimdi bu, herkesin uygulamalarında kullanıcı deneyimini daha iyi hale getirmek için kullanabileceği harika bir API olduğunu düşünüyorum.
Umarım bu makale, sorularınız veya endişeleriniz olan yorumlarda size ulaşmanıza yardımcı olmuştur. Okuduğunuz için teşekkürler ve iyi kodlamalar!

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

Kaynak

1-https://blog.reactnativecoach.com/creating-draggable-component-with-react-native-132d30c27cb0