資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學解釋 React Native 中 Modal 視窗的工作原理
Modal 元件有助於在 UI 內容上方顯示內容檢視。
基本的 Modal 元件如下所示：
<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>要使用 Modal 元件，首先需要匯入它，如下所示：
import { Modal } from "react-native";Modal 視窗的基本屬性如下所示：
| 序號 | 屬性和描述 |
|---|---|
| 1 | animationType 此屬性處理顯示模態視窗的動畫。它是一個列舉，具有三個值：slide、fade 和 none。 |
| 2 | onDismiss 此屬性接收一個函式，該函式將在模態視窗關閉時被呼叫。 |
| 3 | onOrientationChange 在顯示模態視窗時，裝置方向更改時呼叫的回撥函式。 |
| 4 | onShow 顯示模態視窗時呼叫的函式，作為屬性值傳遞。 |
| 5 | presentationStyle 此屬性處理模態視窗的顯示方式。可用值為 fullScreen、pageSheet、formSheet 和 overFullScreen。 |
| 6 | transparent 此屬性將決定為模態視窗提供透明檢視還是填充整個檢視。 |
| 7 | visible 此屬性將決定模態視窗是否可見。 |
示例 1：顯示模態視窗
要使用 Modal 元件，首先需要匯入它，如下所示：
import { Modal } from "react-native";要顯示模態視窗，您可以決定想要在其上使用的動畫。選項包括 slide、fade 和 none。在下面的示例中，我們想要顯示一個帶有文字和按鈕的簡單模態視窗，如下所示：
<Modal
animationType="slide"
transparent={true}
visible={isVisible}
>
<View style={styles.centeredView}>
<View style={styles.myModal}>
<Text style={styles.modalText}>Modal Window Testing!</Text>
<Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
</View>
</View>
</Modal>isVisible 變數被賦值給 visible 屬性。預設情況下它為 false，即模態視窗預設情況下不會顯示。isVisible 屬性的初始化如下所示：
const [isVisible, setModalVisiblility] = useState(false);
setModalVisiblility 將更新 isVisible 變數，從 false 變為 true，反之亦然。
在 <Modal> 元件內定義的“關閉”按鈕呼叫 setModalVisiblility(false)，這將使 isVisible 變為 false，模態視窗將消失。
要顯示模態視窗，<modal> 元件外部有一個按鈕，呼叫 setModalVisiblility(true)，如下所示：
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={isVisible}
>
<View style={styles.centeredView}>
<View style={styles.myModal}>
<Text style={styles.modalText}>Modal Window Testing!</Text>
<Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
</View>
</View>
</Modal>
<Button title="Click Me" onPress={() => {
setModalVisiblility(true);
}}
/>
</View>以下是顯示/隱藏模態視窗的工作程式碼。
import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
const [isVisible, setModalVisiblility] = useState(false);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={isVisible}
>
<View style={styles.centeredView}>
<View style={styles.myModal}>
<Text style={styles.modalText}>Modal Window Testing!</Text>
<Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
</View>
</View>
</Modal>
<Button title="Click Me" onPress={() => {
setModalVisiblility(true);
}}
/>
</View>
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
myModal: {
width:200,
height:200,
margin: 20,
backgroundColor: "white",
borderRadius: 20,
padding: 35,
alignItems: "center",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.30,
shadowRadius: 4,
elevation: 5
},
modalText: {
marginBottom: 20,
textAlign: "center"
},
modalButton: {
marginBottom: 50,
}
});
export default App;輸出
更新於：2021年7月1日
266 次瀏覽
廣告