abdurrahmanekr / bana-istedigini-sor

Yeni paylaştığım yazılardan haberdar olmak için bloguma abone olun:
https://avarekodcu.com
12 stars 1 forks source link

React Native Global Yükleniyor Penceresi #34

Closed onurdumann closed 6 years ago

onurdumann commented 6 years ago

Merhaba, React Native ile yeni uğraşıyorum. Butona bastığım zaman bir yükleniyor spinner gibi dönen yuvarlak yapmak istiyorum. Daha sonrasında bir pop-up gibi yazı çıkartcam örnek veriyorum "hoşgeldiniz" yazan. Bunu nasıl yapabilirim? Yükleniyor kısmından kastım splash screen yani uygulamanın açılış sayfası değil. Sadece butona basılınca kullanıcıya yaptığı işlemin devam ettiğini gösteren bir kaç saniyelik spinner göstermek istiyorum. Bu konu hakkında bana yardımcı olur musunuz??

abdurrahmanekr commented 6 years ago

Merhaba güne başlamadan hemen sorunuza yanıt vereyim :) Öncelikle böyle bir komponent için wrapper alanına ihtiyacınız var. Uygulamanızı şu şekilde tasarlayabilirseniz sorununuzu çözersiniz:

const App = () => (
    <View
        style={{ flex: 1 }}>
        <Navigator />
        <Loading/>
    </View>
);

Navigator sizin yönlendirme yaptığınız yer. Loading ise oradan bağımsız bir komponent. Loading'in içinde basitçe şunları yapabilirsiniz:

render(){
    return (
        <View
            style={{
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                backgroundColor: '#fff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            }}>
            <Text>Yükleniyor</Text>
        </View>
    );
}

İşin en can alıcı olayı ise sizin bu komponent'i gösterip gizleme yapmanızla ilgili bu durumda Animating kullanabilirsiniz veya animasyonsuz gösterip gizleme yapabilirsiniz.

Daha önemli olan durum Loading sizin diğer komponentlerinizden bağımsız olduğu için bunu nasıl setState edeceğinizde. Ben genellikle bu durumlarda çok uğraşmamak için wildemmiter kullanırım. Sanırsam yapmanız gereken sadece bu kadardı.

onurdumann commented 6 years ago

https://github.com/react-native-component/react-native-smart-loading-spinner-overlay Gönderdiğim linkteki gibi bir şey yapmak istiyorum ben. Butona basınca o spinner loading’i atıyorum 10saniye gösterecek. Saniye dolduktan sonra “Siparişiniz Alınmıştır” gibi bir pop-up çıkartmak istiyorum.

Windows 10 için Postahttps://go.microsoft.com/fwlink/?LinkId=550986 ile gönderildi


Gönderen: Avare Kodcu notifications@github.com Gönderildi: Monday, January 15, 2018 9:34:35 AM Kime: abdurrahmanekr/bana-istedigini-sor Bilgi: Onur DMN; Author Konu: Re: [abdurrahmanekr/bana-istedigini-sor] React Native Yardım (#34)

Merhaba güne başlamadan hemen sorunuza yanıt vereyim :) Öncelikle böyle bir komponent için wrapper alanına ihtiyacınız var. Uygulamanızı şu şekilde tasarlayabilirseniz sorununuzu çözersiniz:

const App = () => ( <View style={{ flex: 1 }}>

    <Loading/>
</View>

);

Navigator sizin yönlendirme yaptığınız yer. Loading ise oradan bağımsız bir komponent. Loading'in içinde basitçe şunları yapabilirsiniz:

render(){ return ( <View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>

Yükleniyor
    </View>
);

}

İşin en can alıcı olayı ise sizin bu komponent'i gösterip gizleme yapmanızla ilgili bu durumda Animating<www.avarekodcu.com/konu/24/react-native-animasyonlar-animated-api> kullanabilirsiniz veya animasyonsuz gösterip gizleme yapabilirsiniz.

Daha önemli olan durum Loading sizin diğer komponentlerinizden bağımsız olduğu için bunu nasıl setState edeceğinizde. Ben genellikle bu durumlarda çok uğraşmamak için wildemmiterhttp://www.avarekodcu.com/konu/23/react-native-global-event-handler-wildemitter-kullanimi kullanırım. Sanırsam yapmanız gereken sadece bu kadardı.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/abdurrahmanekr/bana-istedigini-sor/issues/34#issuecomment-357594170, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AWo6wS15ZV_gKL9Ltr6MifvqMbnZlCb1ks5tKvF7gaJpZM4Rd9Sr.