[英]React Native - Floating (or popup) Screen question
I'm trying to do something like that last image, the one that has the product detail to add to cart with the blurred background我正在尝试做一些类似于最后一张图片的事情,该图片将产品详细信息添加到带有模糊背景的购物车
Is there a way to make that floating screen in react navite?有没有办法在 react navite 中制作浮动屏幕?
I'm looking for something maybe similar to it, I don't really care about the content inside of it, just the general screen popup我正在寻找可能与它类似的东西,我并不真正关心其中的内容,只是一般的屏幕弹出窗口
I dont know how its called, so pointing me in a direction to do research or just naming it so I can google it would very much be appreciated it我不知道它是怎么称呼的,所以指点我做研究的方向或只是命名它以便我可以谷歌它会非常感谢它
It's called Modal and you can use React Native's component to present it.它叫做 Modal,你可以使用 React Native 的组件来呈现它。 Check for official documentation https://reactnative.dev/docs/modal
检查官方文档https://reactnative.dev/docs/modal
For the blur part, you can use this library https://github.com/Kureev/react-native-blur对于模糊部分,您可以使用此库https://github.com/Kureev/react-native-blur
Here is a sample code to show the modal:这是显示模态的示例代码:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.