Пример модального окна React Native

React Native Modal — это встроенный компонент, который используется для создания модальных всплывающих окон. Компонент Modal — это основной способ представления содержимого над закрывающим представлением. Мы используем компонент React Native под названием Modal для отображения изображения и текста. Если вам нужно больше контроля над тем, как представлять модальные окна в остальной части приложения, рассмотрите возможность использования навигатора верхнего уровня.

Содержание

Пример модального окна React Native
# Шаг 1. Установите React Native на Mac.
# Шаг 2. Добавьте кнопку.
# Шаг 3: Создайте DisplayModal.js файл.
# 4: Модальные свойства.
Visible
# Базовая версия React Native Modal Popup
Рекомендуемые сообщения

Недавно я работал с модальными всплывающими окнами в React Native (снова!) и понял, что это повторяющийся шаблон во многих приложениях, о котором стоит немного рассказать. Итак, вот несколько моих уроков, которые я получил при многократной реализации модальных диалогов.

Примечание: во многих случаях вы можете прекрасно использовать встроенный модальный компонент из React Native. . Если это решит вашу проблему, вся сила вам!

Хорошо, давайте сначала установим React Native Project .

# Шаг 1. Установите React Native на Mac.

Если вы не установили React Native CLI глобально, установите его с помощью следующей команды.

 npm install -g react-native-cli

Хорошо, теперь для создания нового приложения введите следующую команду.

 react-  native init rncreatecd rncreate

Теперь, после установки, нам нужно открыть это приложение в двух разных симуляторах.

Для тестирования на iOS simulator, введите следующую команду.

 react-native run-ios

Откройте проект в вашем любимом редакторе.

  код.

# Шаг 2. Добавьте кнопку.

Мы отобразим две вещи внутри модального окна.

Текст
Изображение

Итак, внутри корня создайте одну папку с именем assets и внутри нее создайте одну папку с именем images , добавьте изображение с вашего локального компьютера и скопируйте изображение в эту папку.

Хорошо. , теперь добавьте кнопку и изображение в представление контейнера. Введите следующий код внутри

//App.jsimport React, {Component} из 'react'; импортируйте Krunal из './assets/ images/Krunal.jpg '; импортировать {View, Button, StyleSheet} из' react-native '; экспортировать класс по умолчанию App extends Component {render () {return (  )}} const styles = StyleSheet.create ({container: {marginTop:  300,}});

Итак, здесь мы добавили одну кнопку, а также импортировали файл изображения. Прямо сейчас мы его еще не использовали, но мы воспользуемся через минуту.

Наша цель — когда пользователь нажимает кнопку, появляется модальное окно, в противном случае оно не всплывает, и мы его не видим. Итак, теперь мы импортируем еще один компонент и передаем Image и Text в качестве опоры для этого компонента.

Кроме того, по умолчанию Modal всегда открыт, поэтому нам нужно работать с ним по-своему. Вот почему нам нужно состояние, которое мы можем контролировать, и в конечном итоге мы контролируем Modal .

# Шаг 3: Создайте DisplayModal.js файл.

Теперь создайте одну папку в корне с именем components и внутри нее один файл с именем DisplayModal.js и добавьте следующий код.

//DisplayModal.jsimport React from 'react'import {Modal, View, Image, Text, StyleSheet} из' react-native '; const DisplayModal = (props) => ( console.log ('closed')} >>    {props.data}   ) const styles = StyleSheet.create ({image: {marginTop: 20, marginLeft: 90, height: 200,  width: 200}, text: {fontSize: 20, marginLeft: 150}}) экспорт DisplayModal по умолчанию;

DisplayModal — статический компонент, и он не имеет нг делать с государством. Поэтому я использовал его как функциональный компонент. Он просто принимает реквизиты и отображает их в стилизованной форме.

Вы можете заметить, что мы использовали свойство Modal visible . Поэтому, когда это правда, мы можем видеть модальное окно, иначе мы не видим модальное окно. Таким образом, он управляется родительским компонентом, а в нашем случае это

Итак, когда пользователь нажимает, мы меняем состояние отображения свойство внутри App.js на true , и теперь мы можем видеть Modal .

Теперь напишите следующий код внутри файла App.js .

//App.jsimport React, {Component} из 'react'; import Krunal  from './assets/images/Krunal.jpg';import {View, Button, StyleSheet} из' react-native '; импортировать DisplayModal из' ./components/DisplayModal';export класс по умолчанию. Приложение расширяет Component {state = {display  : false} triggerModal () {this.setState (prevState => {return {display: true}});  } render () {return (   )}} const styles = StyleSheet. create ({container: {marginTop: 300,}});

Итак, здесь мы определили одно состояние, называемое display, и по умолчанию оно ложно. Когда пользователь нажимает на кнопку, она изменится на true, и мы увидим, что появится всплывающее окно Modal.

# 4: Модальные свойства.

Вы можете узнать больше о модальных свойствах по этой ссылке.

Здесь мы использовали одно модальное свойство, называемое

Он имеет следующие значения.

слайд: вставляется снизу.
fade: исчезает из поля зрения.
none: отображается без анимации.

Мы использовали слайд , но вы можете попытаться исчезнуть и посмотреть, как это может изменить эффект анимации макета.

Visible

Свойство visible принимает два аргумента.

true
false

Если это правда, то это будет видно внутри экрана, в противном случае — нет. Мы передали свойство visible внутри модального окна при нажатии кнопки.

Наконец, React Native Modal Example | Модальное окно In React Native Tutorial окончено.

Представьте себе модальное окно, которое мы можем увидеть во множестве простых приложений. В таком базовом случае видимость модального окна управляется внутренне локальным состоянием некоторого компонента. См. Следующий код.

 class NewScreen extends Component {state = {showConfirmation: false};  handleSubmit = value => {this.setState ({showConfirmation: true, value: value});  }; //Обработчик, когда пользователь подтверждает свой выбор в модальном handleConfirm = () => {//…}; //Обработчик, когда пользователь отменяет диалоговое окно подтверждения handleCancel = () => {this.setState ({showConfirmation: false});  };  render () {const {showConfirmation} = this.state;  return ( {showConfirmation && } );  }} экспорт по умолчанию NewScreen;

Это типичный модальный экран, который я видел много раз. Его видимость обрабатывается родительским компонентом путем изменения его внутреннего состояния.

Мы получим showConfirmation из локального состояния и, в зависимости от того, установлено оно или нет, показать или скрыть диалоговое окно подтверждения.

Мы также передали бы туда кнопки handleConfirm и handleCancelbuttons, которые позаботятся о логике, которая должна произойти, когда пользователь нажимает любой из них.

Основной преимущества этого решения в том, что оно простое, легко читаемое (и обдумываемое) и легко настраиваемое в любом представлении..

Основные недостатки заключаются в том, что, хотя он и прост, есть код управления, который нам нужно написать в каждом компоненте, который его использует, и его можно настроить везде, где он используется. что затрудняет его глобальное изменение.