"Enter"a basıp içeriğe geçin

React-native ile bilgilendirici intro hazırlamak

Merhaba,

Bugün sizlerle react-native de bir intro nasıl hazırlanır buna göz atacağız.
Aslında benim hiç sevmediğim ve geçiştirdiğim bir geliştirme ancak bazen mecbur yapılması gerekiyor 🙂
Intro için FuYaoDe arkadaşımızın hazırladığı react-native-app-intro kütüphanesini kullanacağız.

Boyut ayarlamaları oldukça güzel yapılmış* tasarımsal olarak da göze güzel gelen bir yapısı var.
İndirmek için aşağıdaki komutu kullanıyoruz

$ npm i react-native-app-intro --save

kütüphanemizi indirdikten sonra, import etmek için aşağıdaki kod satırını javascript dosyamıza ekleyelim.

import AppIntro from 'react-native-app-intro';
default class Example extends React.Component {
  onSkipBtnHandle = (index) => {
  }
  doneBtnHandle = () => {
  }
  nextBtnHandle = (index) => {
  }
  onSlideChangeHandle = (index, total) => {
  }
  render() {
    const pageArray = [{
      title: 'Page 1',
      description: 'Description 1',
      img: 'https://goo.gl/Bnc3XP',
      imgStyle: {
        height: 80 * 2.5,
        width: 109 * 2.5,
      },
      backgroundColor: '#fa931d',
      fontColor: '#fff',
      level: 10,
    }, {
      title: 'Page 2',
      description: 'Description 2',
      img: require('../assets/some_image.png'),
      imgStyle: {
        height: 93 * 2.5,
        width: 103 * 2.5,
      },
      backgroundColor: '#a4b602',
      fontColor: '#fff',
      level: 10,
    }];
    return (
      <AppIntro
        onNextBtnClick={this.nextBtnHandle}
        onDoneBtnClick={this.doneBtnHandle}
        onSkipBtnClick={this.onSkipBtnHandle}
        onSlideChange={this.onSlideChangeHandle}
        pageArray={pageArray}
      />
    );
  }
}

module.export=Example;

Yukarıda örnek bir kod parçası vardır. pageArray değişkeni ile introdaki sayfa özelliklerini belirtiriz. Resmin gösterileceği kısımı, başlığı ve açıklamasını ve birkaç özelliğini daha belirtiriz.
Buradaki level property’si diğer sayfaya geçiş animasyonundaki başlık ve içeriğin kayış seviyesidir.
*Eğer navigator kullanıyorsanız, onu bir şekilde disabled etmeniz lazım, yoksa aşağıdaki skip, done gibi alanlar gözükmeyecektir.

Kütüphanenin birçok property’si de var. Örneğin Skip yada Done yazan yerleri doneBtnLabel, skipBtnLabel gibi propertyleri setleyerek de değiştirebilirsiniz.
Yada bu butonların gözükmesini istemiyorsanız showSkipButton, showDoneButton gibi property leri boolean değerler ile setleyebilirsiniz. Bunlar default true olacak şekilde setlenmiştir.

<AppIntro
        pageArray={pageArray}
        ...
        doneBtnLabel='Bitti'
        skipBtnLabel='Geç'
        showSkipButton={false}
      />

Şimdilik yardımcı olabileceğim konu bu kadar.
React-native ile alakalı sorularınızı mail üzerinden yada buraya yorum yazarak iletebilirsiniz.

Serinin diğer yazıları için -> react-native geliştirmeler serisi

Sağlıcakla kalın

İlk Yorumu Siz Yapın

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: