React Native でモーダルウィンドウがどのように機能するかを説明する-jsチュートリアル-php.cn

React Native でモーダルウィンドウがどのように機能するかを説明する

PHPz

リリース： 2023-08-24 15:01:01

転載

839 人が閲覧しました

モーダルコンポーネントは、UI コンテンツの上にコンテンツビューを表示するのに役立ちます。

基本的なモーダルコンポーネントは次のとおりです-

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>

ログイン後にコピー

モーダルコンポーネントを使用するには、以下に示すように、最初にインポートする必要があります-

import { Modal } from "react-native";

ログイン後にコピー

モーダルウィンドウは次のとおりです。

#34#5presentationStyle#6Transparent#7#例 1: モーダルウィンドウ表示を表示するモーダルコンポーネントを使用するには、以下に示すように、最初にインポートする必要があります。

Sr.No	小道具と説明
1	< strong>animationType このプロパティは、表示されるアニメーションを処理しますモーダルウィンドウ。これは 3 つの値を持つ列挙です - スライド、フェード、なし。
#2	onDismiss このプロパティは、呼び出される関数を受け取りますモーダルウィンドウを閉じたとき。
	onOrientationChange デバイスの起動時に呼び出されるコールバック関数モーダルウィンドウの向きが変わるとき見せる。
	onShow prop 値として渡された関数が呼び出されますモーダルウィンドウを表示する場合。
	このプロパティは、モーダルボックスの表示を処理します。窓。利用可能な値は全画面表示、ページシート、フォームシート、オーバーフルスクリーン。
	このプロップは、透明なビューを提供するか塗りつぶすかを決定します。モーダルウィンドウの全体図。
visibile	このプロパティは、モーダルウィンドウが表示されるかどうかを決定します。見えるか見えないか。 < p>

import { Modal } from "react-native";

ログイン後にコピー

モーダルウィンドウを表示するには、そこに表示するアニメーションを決定できます。オプションは、スライド、フェード、およびなしです。次の例では、以下に示すように、テキストとボタンを含む単純なモーダルウィンドウを表示します。 -

<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 に、またはその逆に更新します。

コンポーネントで定義されている閉じるボタンは setModalVisiblility(false) を呼び出します。これにより isVisible が false になり、モーダルウィンドウが消えます。

モーダルウィンドウを表示するには、

以下に示すように、コンポーネントの外側に 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;

ログイン後にコピー

出力

以上がReact Native でモーダルウィンドウがどのように機能するかを説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。