React Native ile Mobil Uygulama Geliştirme – 8 – React Native’de Tab Navigation Kullanımı

“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 8. kısmıdır. Bir önceki makalede (Part 7), React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

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

Muhtemelen mobil uygulamalarda en yaygın gezinme tarzı sekme tabanlı gezinmedir. Mobil uygulamalarının ekranlarının altındaki veya üstteki başlığın altında (veya hatta bir başlık yerine) sekmeler olabilir.

Bu yazımızda Tab Navigation kullanmak için createBottomTabNavigator’ı kapsar. Ayrıca, uygulamanıza sekmeler eklemek için createMaterialBottomTabNavigator ve createMaterialTopTabNavigator’ı da kullanabilirsiniz.

Devam etmeden önce ilk olarak @ react-navigation/bottom-tabs yükleyin:

npm
npm install @react-navigation/bottom-tabs

Yarn
yarn add @react-navigation/bottom-tabs



Tab Navigation Kullanımı Örneği

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Ekran Görüntüsü:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Görünümü Özelleştirme

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Bunu inceleyelim:

tabBarIcon, alt sekme gezgininde desteklenen bir seçenektir. Bu nedenle, onu options prop’undaki ekran bileşenlerimizde kullanabileceğimizi biliyoruz, ancak bu durumda, kolaylık sağlamak için simge yapılandırmasını merkezileştirmek için Tab.Navigator’ın screenOptions prop’una koymayı seçtik.
tabBarIcon, odaklanmış durum, renk ve boyut parametreleri verilen bir işlevdir. Yapılandırmada daha aşağıya bir göz atarsanız, tabBarOptions ve activeTintColor ve inactiveTintColor görürsünüz. Bunlar varsayılan olarak iOS platformu varsayılanlarıdır, ancak bunları buradan değiştirebilirsiniz. TabBarIcon’a aktarılan renk, odaklanan duruma bağlı olarak aktif veya pasif olandır (odaklanma etkindir). Boyut, sekme çubuğunun beklediği simgenin boyutudur.
CreateBottomTabNavigator yapılandırma seçenekleri hakkında daha fazla bilgi için tam API referansını okuyun.

Simgelere rozetler ekleyin

Bazen bazı simgelere rozetler eklemek isteriz. Bunu yapmak için tabBarBadge seçeneğini kullanabilirsiniz:

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />

UI açısından bu bileşen kullanıma hazırdır, ancak yine de React Context, Redux, MobX veya etkinlik yayıcıları kullanmak gibi rozet sayısını başka bir yerden düzgün bir şekilde geçirmenin bir yolunu bulmanız gerekir.

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

 

Google Play In-App Review API Kullanımı

Android uygulamanız Play Store’da yayınlandıktan sonra, uygulama puanlandırma ve yorumları daha fazla indirme sağlamak için çok önemli faktörlerdir. Bunu başarmak için, genellikle kullanıcıları Play Store’a yönlendirerek uygulamayı puanlandırmalarını isteriz. Bu yöntem ile kullanıcıların Play Store’a yönlendirildikten sonra uygulamanıza geri dönmeme olasılığı vardır. Ayrıca bazı kullanıcılar, uygulamayı Play Store’da puanlandırmak da zorlanabilir.

Bu makalemde, Google Play In-App Review API ile kullanıcının uygulama puanlandırma ve yorumlarını, Android uygulama içinde yapmasını sağlayarak, indirme sayılarını arttırma konusunda fayda sağlayacağız.

Aşağıdaki resimde olduğu gibi kullanıcı, uygulama içinde puanlandırma ve yorum yapabilir.

In-App Review için Önemli Noktalar

  1. Bu API yalnızca Android 5.0 (API seviyesi 21) veya sonraki sürümlere sahip olan Android cihazlarda çalışır.
  2. Google Play, kullanıcıya ne sıklıkla review dialog arayüzünü gösterilebileceğiniz konusunda zamana bağlı bir kota uygular. Bu kota nedeniyle, launchReviewFlow yöntemini kısa bir süre içinde birden çok kez çağırmak her zaman bir iletişim kutusu görüntülemeyebilir. (örneğin, bir aydan az). Kota hakkında bilgileri quotas linkinden ulaşabilirsiniz.
  3. Rating widget üzerinde tasarımsal bir değişiklik yapamazsınız. Bu konuda daha detaylı bilgiyi Design Guidelines linkinden ulaşabilirsiniz.

Projemizde Google Play In-App Review API’yi uygulayabilmek için aşağıdaki belirttiğim adımları uygulamalısınız.

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Play Core API ve material kütüphanelerini yüklüyoruz.

implementation "com.google.android.play:core:1.8.0"

//material'i hata geri dönüşü olduğunda kullanıcı deneyimi için kullanıldı
//isterseniz, alternatif kütüphanelerde kullanabilirsiniz
implementation "com.google.android.material:material:1.3.0-alpha02"

2- Backend Kodlama

İlk önce ReviewManager interface oluşturmamız gerekir. Sonrasında review akışını başlatmak için ReviewInfo nesnesi üzerinden launchReviewFlow () yöntemini çağırdık. Bazı nedenlerden dolayı işleyiş başarısız olursa, kullanıcıyı playstore uygulamasına yönlendirip, klasik playstore üzerinden değerlendirme yapılmasını sağladım. Detaylı açıklamalar kodlar arasında comment olarak bulabilirsiniz.

import android.content.*;
import android.net.Uri;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.dialog.MaterialAlertDialogBuilder;
import com.google.android.play.core.review.*;
import com.google.android.play.core.tasks.Task;

public class MainActivity extends AppCompatActivity {
    private ReviewManager reviewManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        reviewManager = ReviewManagerFactory.create(this);
        findViewById(R.id.btn_rate_app).setOnClickListener(view -> showRateApp());
    }

    /**
     * In-App review API'nin sağladığı rating widget ve alt sayfalarını gosteren metod
     *Rating widget kotalara ve sınırlamalara bağlı olarak gösterilebilir veya gösterilmeyebilir
     */
    public void showRateApp() {
        Task<ReviewInfo> request = reviewManager.requestReviewFlow();
        request.addOnCompleteListener(task -> {
            if (task.isSuccessful()) {

                ReviewInfo reviewInfo = task.getResult();
                Task<Void> flow = reviewManager.launchReviewFlow(this, reviewInfo);
                flow.addOnCompleteListener(task1 -> {
                    //Rating widget gösterilme işlemi bitti. Yalnız bu noktada API'de, kullanıcının puanlandırma yapıp yapmadığıyla
                    //ilgili bir kontrol bulunmamaktadır

                });
            } else {
                //Herhangi bir hata varsa showRateAppFallbackDialog metodu çağırılıyor
                showRateAppFallbackDialog();
            }
        });
    }

    /**
     * bir hata ile karşılaşıp, uygulama içinde Rating widget gösterilemediği durumda,
     * uygulamanızı PlayStore yönlendirip, PlayStore web sitesinde puanlandırma yapılmasına yönlendirdim.
     */
    private void showRateAppFallbackDialog() {
        //Ben tercih olarak MaterialAlertDialogBuilder kullandım. Fakat dilerseniz, klasil AlertDialog da kullanabilirsiniz
        new MaterialAlertDialogBuilder(this)
                .setTitle(R.string.rate_app_title)
                .setMessage(R.string.rate_app_message)
                .setPositiveButton(R.string.rate_btn_pos, (dialog, which) -> redirectToPlayStore())
                .setNegativeButton(R.string.rate_btn_neg,
                        (dialog, which) -> {
                    
                        })
                .setNeutralButton(R.string.rate_btn_nut,
                        (dialog, which) -> {
                    
                        })
                .setOnDismissListener(dialog -> {
                })
                .show();
    }

    //Kullanıcıyı PlayStore yönlendirme(Hata ile karşılaşıldığında kullandım)
    public void redirectToPlayStore() {
        final String appPackageName = getPackageName();
        try {
            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + appPackageName)));
        } catch (ActivityNotFoundException exception) {
            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://play.google.com/store/apps/details?id=" + appPackageName)));
        }
    }
}

3- Arayüz Kodlama

Ben MaterialButton kullanarak, kullanıcıdan değerlendirme yapmasını yönlendirdim. Siz dilerseniz, klasik button da kullanabilirsiniz. In-App Review API’den bağımsız, sizin tasarım tercihinizle alakalı bir durum.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn_rate_app"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="Rate App!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Eğer benim gibi MaterialButton kullanacaksanız, res->values ->styles.xml dosyasınızda temanız MaterialComponents şeklinde tanımlanmış olmalıdır. Örnek;

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
//...
</style>

In-App Review Test Etme

In-App Review API’sini barındıran proje kodlarını test edebilmek için uygulamanızı PlayStore’da onaylatmış olmanız gerekir. En azından uygulamanızı PlayStore’da ve Internal App Sharing test ortamlarına yüklemelisiniz.

Örnek proje kodlarına github linkinden ulaşabilirsiniz.

Kaynak

1-https://developer.android.com/guide/playcore/in-app-review/kotlin-java

 

 

 

React Native ile Mobil Uygulama Geliştirme – 7 – React Native’de Kullanılan En İyi 10 Kütüphane

“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 7. kısmıdır. Bir önceki makalede (Part 6), React Native Animation, mobil uygulama geliştirirken yazılara, resimlere vb. arayüz bileşenlerine, animasyonu nasıl uygulayacağımızı anlattım.

React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

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

React Native topluluğu çok büyük. Çoğu web geliştiricisi, React Native’i android ve iOS için iki dilden öğrenmeyi tercih ediyor. Hemen hemen her geliştirme çerçevesinde, geliştirmeyi herhangi bir üçüncü taraf kütüphane (library) kullanmadan yapmak gerçekten zordur. React.js’ye aşina iseniz, React Native’de birçok ortak kütüphane (library) bulacaksınız.

Bu blog gönderisinde, uygulamalarınızda kullanılabilecek en iyi 10 React Native kütüphanelerini (libraries) listeliyoruz. Bu kütüphaneler (libraries) iyi test edilmiştir ve başlaması kolaydır. Ayrıca bu kütüphanelere (libraries) küçük bir açıklama ekliyoruz. Daha detaylı bilgi almak için github sayfalarına bakabilirsiniz.

1. Axios

Axios, javascript uygulamaları için en popüler HTTP istemci kütüphanelerden biridir. Çoğu uygulama, web’e GET, POST, PUT veya başka herhangi bir Http isteği aracılığıyla bağlanmayı gerektirir. Axios, bu istekleri yazmayı gerçekten kolaylaştırır. Ayrıca, istek başlığını ve hata işlemlerini yapılandırma gibi birçok farklı seçenek sunar.

Npm, bower veya yarn ile kurabilirsiniz. Belgeler de iyi korunur ve MIT lisanslı bir kütüphanedir. Axios hakkında daha fazla bilgi edinmek için Github sayfasını kontrol edin.

 

2. Redux ve react-redux

Redux, React.js’de durum yönetimi için kullanılır. Varsayılan durum yönetimi, yüksek oranda ölçeklenebilir uygulamalar için yeterince iyi değildir. Redux’u daha basit hale getirmek için kullanabilirsiniz. Redux ve React-Redux, her ikisi de farklı kütüphanelerdir. Redux herhangi bir Javascript uygulamasıyla kullanılabilir. React Redux kütüphanesi, redux üzerinden bir bağlanmadır. Bu kütüphane hem React.js hem de React Native ile kullanılabilir. React Redux bir npm paketi olarak mevcuttur ve mevcut bir projeye kolayca entegre edilebilir. Redux mevcut bir projeye eklenebilir, ancak bunu proje geliştirmenin başlangıcında eklemek en iyi uygulamadır.

İşte React Redux github sayfasının bağlantısı.

3. NativeBase

Native Base, bir UI bileşeni React-Native kütüphanesidir. Uygulamanızın UI bileşenini hızlı bir şekilde başlatmak istiyorsanız, bu kullanışlı bir kütüphanedir. Bu kütüphanenin avantajlarından biri, onu native React Native uygulamalarıyla veya expo ile kullanabilmenizdir. Hem Android hem de iOS uygulamaları için güzel UI bileşenleri oluşturmak için birçok seçeneğe sahiptir. Belgeler iyi korunur ve büyük bir topluluk, tüm React-Native sürümler için onu güncel tutmaktadır.

İşte github sayfasının bağlantısı.

 

4. React Native Push Notifications

Push notifications hem Android hem de IOS platformlarında farklıdır. Bu Kütüphane, hem Android hem de iOS’ta local ve remote bildirimleri uygulamayı kolaylaştırır. Planlanmış bildirim, bildirim için özel sesler, bildirimler için öncelik ayarlama, önem ayarlama vb. Gibi farklı özelleştirme seçenekleri sunar. Birkaç yöntem yalnızca Android’de mevcuttur ve çok azı yalnızca iOS’ta kullanılabilir, Github sayfasında iyi belgelenmiştir.

Bu, github sayfasının bağlantısıdır.

 

5. React Native Elements

Bu makaleyi yazarken, bu kütüphanenin github’da 15000’den fazla yıldızı var. Bu, bir mobil uygulamada gerekli olan hemen hemen tüm farklı UI bileşenlerini içeren bir UI araç takımı koleksiyonudur. Bu, React Native elementlerini gösteren bir expo uygulamasıdır. Bu, GitHub sayfasının bağlantısıdır.

 

6. React Native Config

Bir yapılandırma dosyası kullanmak her zaman iyi bir geliştirme uygulamasıdır. Ön uç, arka uç veya mobil uygulamalar: yapılandırma dosyası kodunuzu çok daha kolay hale getirebilir. Yapılandırma dosyası, tüm ortam ayarları değerlerini saklamak için kullanılır. Örneğin, uygulamanızı geliştirme, hazırlama ve üretimde farklı bir API uç noktasında test etmek isteyebilirsiniz.

Farklı ortamlar için farklı yapılandırma dosyaları oluşturabilir ve sahne, üretim ve geliştirme arasında kolayca geçiş yapabilirsiniz. React Native Config kütüphanesi, React Native IOS ve Android uygulamalarında yapılandırma değişkenleri oluşturmayı kolaylaştırır. Aynı yapılandırma dosyasını hem Android hem de IOS için kullanabilirsiniz.

Bu, kütüphanenin github sayfasıdır.

 

7. React Native Permissions

Uygulamanız kamera, mikrofon vb. Gibi herhangi bir iPhone veya Android donanımı veya kişiler, mevcut konum vb. Gibi herhangi bir özel telefon öğesi kullanıyorsa, kullanıcıdan izin istemeniz gerekir. İzni kabul etmek veya reddetmek kullanıcının sorumluluğundadır. İzin işleme hem Android hem de iOS’ta farklıdır. React Native Permissions kütüphanesi, uygulamayı kolaylaştırır. Farklı izin türlerini algılayabilir ve ayrıca kullanıcı izni yetkilendirmiş veya reddetmiştir.

Bu, Github sayfasının bağlantısıdır.

 

8. React Native Maps

IOS için apple maps kullanmanız ve Android için Google maps kullanmanız gerekir. Her ikisi de tamamen farklıdır ve aynı özelliği IOS ve Android’de uygulamak için her iki harita bileşeni hakkında bilgi gerektirir. Google maps’i bir iOS projesinde kullanabilirsiniz, ancak apple, apple maps kullanmanızı önerir.

React Native Maps kütüphanesi, her iki harita görünümünü de entegre etmeyi kolaylaştırır. Kodunuzda yalnızca bir basit <MapView /> etiketi kullanarak, birçok karmaşık özelliği hem Android hem de IOS’ta aynı anda uygulayabilirsiniz. İşaretçi ekleme, ekstra animasyonlu API bileşenleri ekleme, bölgeyi veya konumu izleme, programlı olarak konum değişikliği, yakınlaştırma vb. Gibi birçok özelleştirilebilir seçeneğe sahiptir. Çok az şey yalnızca Android’de ve çok azı IOS’ta mevcuttur.

İşlevleri hakkında daha fazla bilgi edinmek için github deposunu kontrol edebilirsiniz.

 

9. React Native Net Info

Uygulamanız ağla ilgileniyorsa, bu mutlaka sahip olunması gereken bir kitaplıktır. Bu kitaplık, bağlı ağ türünü ve kalitesini kontrol etmek için kullanılır. Tüm IOS, Android ve Windows platformlarında mevcuttur. Bunu npm veya iplik kullanarak kurabilirsiniz ve işte bu kadar. Kitaplığı içe aktarın ve yalnızca bir satır kod kullanarak ağ durumunu kontrol edebilirsiniz.

Bu modül size bağlantı türü (2g, 3g, 4g, wifi vb.), Ağın erişilebilir olup olmadığı, ağın detayı (SSID, güç, IP adresi vb.) Gibi birçok gelişmiş seçenek sağlayabilir. ve daha fazlası. Kütüphane hakkında daha fazla bilgi edinmek için dokümantasyonu inceleyebilirsiniz.

 

10. React Native UI Kitten

UI Kitten bir UI öğeleri kütüphanesidir. Eva tasarım sistemine göre geliştirilmiştir. Bu kütüphanenin ana avantajı, hem açık hem de karanlık modlara sahip olması ve uygulamayı yeniden yüklemeden çalışma zamanında bu temalar arasında geçiş yapabilmenizdir. Başlamak için 20’den fazla bileşene sahiptir. Ayrıca, başlamak için 40’tan fazla karanlık mod ve ışık modu temasına sahip bir başlangıç uygulaması sağlar.

480’den fazla açık kaynak simgesiyle aynı topluluk tarafından geliştirilen eva-icons kütüphanesini de kontrol edebilirsiniz. Bu, kütüphanenin GitHub sayfasıdır.

 

Bu En İyi 10 React Native Kütüphanelerinin, React Native projelerinde kullanabilmeniz için bir üçüncü taraf kütüphanesini daha hızlı almanıza yardımcı olacağını umuyoruz. Herhangi bir kütüphaneyi kullanmadan önce yıldızları, aktif topluluğu ve şu anda açık olan konuları kontrol etmek gerçekten en iyi uygulamadır. Ayrıca, ana projeye entegre etmeden önce kütüphaneyi daima örnek bir uygulama ile deneyin veya demo uygulamalarını deneyin.

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

Kaynak: https://www.opencodez.com/