Покажите свое модальное окно в приложении React Native (IOS и Android)

Модальное всплывающее окно в приложении React Native Expo

Привет кодерам..!!

В разработке мобильных приложений все, что вам нужно, — это привлекательный пользовательский интерфейс. Пользовательский интерфейс, который привлекает внимание пользователя и нравится всем. О таких особенностях React Native мы и поговорим в этом блоге. Вы когда-нибудь задумывались, как окно сообщения появляется в верхней части экрана, когда вы нажимаете кнопку. Что ж, это модальная функция React Native. Давайте посмотрим, как создать модальное представление с помощью React Native. Займите свое место и выпейте чашку кофе, давайте начнем взлом.

Настройка и установка

1. Создайте каталог и перейдите к нему.
2. Откройте командную строку или терминал в этом каталоге и выполните команду: expo init Modal
3. Выберите пустой шаблон и продолжите загрузку.

Модальный код в React Native Expo

App.js

import React, { useState } from 'react';
import { Alert, Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello Coders..!!</Text>
<TouchableHighlight
              style={{ ...styles.openButton, backgroundColor: '#2196F3' }}
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text style={styles.textStyle}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
<TouchableHighlight
        style={styles.openButton}
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text style={styles.textStyle}>Show My Modal</Text>
      </TouchableHighlight>
    </View>
  );
}

Во-первых, мы импортировали все необходимые пакеты. В этом проекте мы использовали концепции реагирующих хуков. Важная часть проекта — пользовательский интерфейс. Итак, в разделе «Модальный вид» мы устанавливаем тип анимации «слайд». Остальная часть — стилизация.

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

Ну, это много стилей необходимо. И мы закончили с частью кода здесь. Это простой javascript-проект. Теперь давайте запустим этот проект в вашем терминале или командной строке, отсканируйте QR-код с помощью ваших устройств IOS или Android и посмотрите проект в действии. После успешной сборки зависимостей javascript вы увидите что-то вроде этого.

Это круто, правда? Теперь измените тип анимации с «slide» на «fade». Вы увидите, как что-то изменится в поведении анимации. Мы закончили с частью кода здесь. Если вы столкнетесь с какими-либо трудностями, дайте мне знать в разделе комментариев.

Спасибо.