React Native Icons

React Native ile uygulama geliştirirken en çok ihtiyaç duyulan ve en sıklıkla kullanılan görseller ICON lardır bunların sayesinde uygulamanıza işlemci yükü bindirmeden görsellikler ekleyebilirsiniz.

React native ile kullanabileceğiniz çok sayıda icon kütüphanesi bulunmaktadır ancak ben sıklıkla @expo/vector-icons’ kullanıyorum ve şuana kadar ihtiyacım olupta bulamadığım icon görmedim .

Vector Icons kullanmadan önce projemize / sayfamıza import etmemiz gerekir öncelikle import işlemimizi gerçekleştirelim;

İhtiyacınız olan tüm iconların listesine ise https://expo.github.io/vector-icons/ adresi üzerinden erişebilirsiniz, sıklıkla IOS ile başlayan iconları kullanıyorum, dizayn olarak ve kullanılabilirlik olarak oldukça güzel ;

Öncelikle componentimizi import edelim ;

import { Ionicons } from '@expo/vector-icons';

sonrasında kullanımına bakalım . ;

<Ionicons name="ios-basket-outline" size={29} color="white" />

Örnek olarak bir butona ekleyerek test edelim ;

  <TouchableOpacity
                        style={{

                            padding: 5,
                            paddingLeft: 9,
                            flexDirection: 'row',
                            backgroundColor: 'rgba(0,0,0,0.5)',
                            marginTop: 1,
                            alignItems: 'center'
                        }}
                        onPress={
                            () => this.cikisYap()
                        }>
                        <Ionicons name="ios-exit-outline" size={29} color="white" />
                        <Text
                            style={{

                                color: 'white',
                                fontSize: 14,
                                marginLeft: 20
                            }}
                        >Çıkış Yap</Text>
                    </TouchableOpacity>