Добавить 2-кнопочное, 3-кнопочное оповещение в приложение React Native
Здравствуйте, разработчики React Native .. !!
Добавление функций предупреждений в ваш проект - хорошая привычка, поскольку это улучшает пользовательский интерфейс и оказывает хорошее влияние на пользователя. Вы могли столкнуться с несколькими видами предупреждений при использовании приложения. Эти предупреждения могут быть двухкнопочными или трехкнопочными. Во время удаления чего-либо вы просите пользователя подтвердить это нажатием кнопки «отменить» и «удалить». Это пример функции двухкнопочного оповещения. Примером трехкнопочного предупреждения является то, что приложение, которое вы оцениваете, предлагает три варианта: «Не сейчас», «Никогда» и «Оценить сейчас». Теперь у вас есть четкое представление о том, насколько это важно. Итак, давайте создадим проект, в котором мы добавим функции с двумя и тремя кнопками в наше мобильное приложение с помощью React Native Expo. Займите свое место, выпейте чашку кофе и приступим к работе.
Настройка и установка
1. Создайте каталог и перейдите к нему.
2. Откройте этот каталог в окне терминала или командной строки и выполните команду: expo init Alert
3. Выберите пустой шаблон и продолжить загрузку
Вы увидите что-то вроде изображения выше после того, как выполните все 3 шага. Мы закончили с установочной частью этого проекта. Теперь перейдем к коду.
Код оповещения в React Native Expo
Откройте этот проект в вашем любимом текстовом редакторе. Я предпочитаю VS Code. Откройте файл App.js и давайте сначала посмотрим, как 2-кнопочное оповещение работает в React Native, а затем мы увидим, как 3-кнопочное оповещение работает в React Native.
Двухкнопочное оповещение в React Native Expo
App.js
import React, { useState } from "react"; import { View, StyleSheet, Button, Alert } from "react-native"; export default function App() { const createTwoButtonAlert = () => Alert.alert( "Testing Alert", "You are a amazing developer", [ { text: "Yeah", onPress: () => console.log("Yeah Pressed"), style: "cancel" }, { text: "Nope", onPress: () => console.log("Nope Pressed") } ], { cancelable: false } ); return ( <View style={styles.container}> <Button title="2-Button Alert" onPress={createTwoButtonAlert} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "space-around", alignItems: "center" } });
Сначала импортируйте все необходимые пакеты из данной библиотеки. В этом проекте мы не используем какие-либо внешние библиотеки. Теперь мы добавляем функцию, которая обрабатывает двухкнопочную функцию. И, наконец, верните это. После того, как вы запустите этот проект на своих устройствах IOS или Android и нажмете кнопку 2-Button Alert на экране, вы увидите что-то вроде этого.
3-кнопочное оповещение в React Native Expo
App.js
import React, { useState } from "react"; import { View, StyleSheet, Button, Alert } from "react-native"; export default function App() { const createThreeButtonAlert = () => Alert.alert( "Testing Alert", "You are a amazing developer", [ { text: "Ask me later", onPress: () => console.log("Ask me later pressed") }, { text: "Yeah", onPress: () => console.log("Yeah Pressed"), style: "cancel" }, { text: "Nope", onPress: () => console.log("Nope Pressed") } ], { cancelable: false } ); return ( <View style={styles.container}> <Button title="3-Button Alert" onPress={createThreeButtonAlert} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "space-around", alignItems: "center" } });
Концепция такая же, как и для функции 2-кнопочного оповещения. Мы просто добавили дополнительную кнопку. Просто запустите этот проект в своем терминале или в окне командной строки и посмотрите желаемый результат на экране вашего мобильного устройства. Что-то вроде этого.
Вот и все. Если вы столкнетесь с какими-либо трудностями, дайте мне знать в разделе комментариев.
Спасибо.