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