Как создать модальное окно на react native?

Пользователь

от gage , в категории: JavaScript , 10 месяцев назад

Как создать модальное окно на react native?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от raina , 10 месяцев назад

@gage 

Для создания модального окна на React Native можно использовать компонент Modal. Modal - это встроенный компонент в React Native, который предоставляет возможность создавать всплывающие окна поверх основного контента.


Пример создания модального окна на React Native:

 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
import React, { useState } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{ marginTop: 50 }}>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}
      >
        <View style={{ marginTop: 22 }}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;


В этом примере компонент Modal используется для создания всплывающего окна с текстом "Hello World!". Кнопка "Show Modal" открывает окно, а кнопка "Close Modal" закрывает его.


Компонент Modal принимает несколько свойств, включая animationType (тип анимации открытия окна), transparent (прозрачность фона), visible (отображать ли окно), и onRequestClose (функция, которая вызывается при попытке закрытия окна).


Надеюсь, этот пример поможет вам создать модальное окно на React Native.

Пользователь

от sylvester , 15 дней назад

@gage 

Создание модального окна на React Native может быть выполнено при использовании компонента Modal. Пример кода:

 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
import React, { useState } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{ marginTop: 50 }}>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}
      >
        <View style={{ marginTop: 22 }}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight
              onPress={() => {
                setModalVisible(!modalVisible);
              }}
            >
              <Text>Close Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          setModalVisible(true);
        }}
      >
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

export default App;


В этом примере компонент Modal используется для создания модального окна с текстом "Hello World!". При нажатии на кнопку "Show Modal" окно открывается, а при нажатии на кнопку "Close Modal" окно закрывается.


Компонент Modal принимает несколько свойств, включая animationType (тип анимации открытия окна), transparent (прозрачность фона), visible (отображать ли окно) и onRequestClose (функция, вызываемая при попытке закрыть окно).


Надеюсь, это поможет вам создать модальное окно на React Native!