1

現在、コードを実行すると、アプリが開かれるたびにモーダルが表示されます。これは、「modalVisibility」の初期状態に関係していると思います

「const [modalVisibility, setModalVisibility] = useState(true);」アプリケーションが起動されるたびに呼び出されますか? だとしたらそれはそれで問題です。

これは "onShow" モーダル プロパティの問題ですか?

import React, { useState, useEffect } from 'react';
import { StatusBar, StyleSheet, View, Modal, Text, Button, ScrollView, AsyncStorage } from 'react-native';

export default App = (props) => {

 const [modalVisibility, setModalVisibility] = useState(true);
        const checkIfNeedOpenModal = async () => {
            try {
                const isFirstOpen = await AsyncStorage.getItem('modal');
                if (!isFirstOpen || isFirstOpen !== 'true') {
                    setModalVisibility(true);
                }
            } catch (error) {
                alert(error);
            }
        }

        const saveModalOpen = async () => {
            try {
                await AsyncStorage.setItem('modal', 'true');
            } catch (error) {
                alert(error);
            }
        }
        const onModalShow = () => {
            saveModalOpen();
        }

    useEffect(() => {
        checkIfNeedOpenModal();
    });
return (
        <View style={styles.container}>
            <Modal
                animationType='slide'
                onShow={saveModalOpen}
                transparent={true}
                visible={modalVisibility}
                onRequestClose={() => {
                    alert('closed');
                }}
            >
                <View style={styles.modal}>

                    <ScrollView style={[styles.scrollview, { flex: 1 }]}>
                        <Text>placeholder text</Text>
                    </ScrollView>

                    <View style={{ flexDirection: 'row', justifyContent: 'space-evenly' }}>
                        <Button
                            title="deny"
                            onPress={() => alert('you must accept the privacy policy to play')}
                        />
                        <Button
                            title="accept"
                            onPress={() => setModalVisibility(false)}
                        />
                    </View>
                </View>
            </Modal>
       </View>
   );
};
4

0 に答える 0