Добавить 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-кнопочного оповещения. Мы просто добавили дополнительную кнопку. Просто запустите этот проект в своем терминале или в окне командной строки и посмотрите желаемый результат на экране вашего мобильного устройства. Что-то вроде этого.

Вот и все. Если вы столкнетесь с какими-либо трудностями, дайте мне знать в разделе комментариев.

Спасибо.