时间戳

首页 > 解决方案 > React Native - 浮动（或弹出）屏幕问题

javascript - React Native - 浮动（或弹出）屏幕问题

问题描述

我正在尝试做类似最后一张图片的操作，该图片具有要添加到购物车且背景模糊的产品详细信息

有没有办法在反应导航中制作浮动屏幕？

我正在寻找可能与它相似的东西，我并不真正关心其中的内容，只是一般的屏幕弹出窗口

我不知道它是怎么称呼的，所以给我指明一个研究方向或只是命名它，这样我就可以谷歌了，非常感谢

https://imgur.com/a/u3EFMvs

标签： javascriptreactjsreact-nativeuser-interfaceuser-experience

解决方案

它叫做 Modal，你可以使用 React Native 的组件来呈现它。检查官方文档https://reactnative.dev/docs/modal

对于模糊部分，您可以使用此库https://github.com/Kureev/react-native-blur

这是显示模态的示例代码：

import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

const 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.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </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: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

推荐阅读