Uygulama içerisinde kullanıcıya bilgilendirme mesajları vermek önemli ama bunu görsel olarakta güzel sunmalıyız. React native alert kullanmak her zaman göze hoş gelmeyebilir. Toast mesaj benzeri bir yapı kullanmak hem işleri daha kolaylaştıracak hemde gözede hoş gelecektir.
Kullandığım kütüphaneye buradan ulaşabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React, { Component } from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import FlashMessage, { showMessage, hideMessage } from "react-native-flash-message"; export default class App extends Component { constructor(props) { super(props); this.state = { }; } render() { return ( <View style={styles.container}> <FlashMessage position="top" /> <Text>yusufpamukcu.com</Text> <TouchableOpacity style={styles.button} onPress={() => { bildirim("Bilgi!", "Kayıt başarılı", "success"); }} > <Text style={{ color: '#272828', fontSize: 22 }}>success</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => { bildirim("Hata!", "hata oluştu.", "danger"); }} > <Text style={{ color: '#272828', fontSize: 22 }}>danger</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => { bildirim("bilgi!", "işlem yapılıyor", "info"); }} > <Text style={{ color: '#272828', fontSize: 22 }}>info</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccafaf50' }, button: { width: 350, height: 50, margin: 5, backgroundColor: '#F5B971', justifyContent: 'center', alignItems: 'center', borderRadius: 5, borderWidth: 1, borderColor: '#27282850' } }); function bildirim(message, description, type) { showMessage({ message: message, description: description, type: type }); } |
position kısmına : “top, left, right, bottom”
type kısmına : “success”, “info”, “warning”, “danger”
İlk Yorumu Siz Yapın