模態在本機基礎上無法正常工作

Question

我想要當我點擊按鈕時，打開模態。 但是模態沒有正確打開。 它不可讀。

這是我的模態代碼：

  <Modal
                        isOpen={showModal}
                    >
                        <Modal.Content top="-60" maxWidth={400} height={300}>
                            <Modal.CloseButton />
                            <Modal.Header> bilgiler</Modal.Header>
                            <Modal.Body>
                                <Text>09.08.2001</Text>
                                {/* <Select
                                    minWidth="200"
                                    accessibilityLabel="Choose Service"
                                    placeholder="Son ölçüm tarihi seçiniz.."
                                    _selectedItem={{
                                        bg: "teal.600",
                                        endIcon: <CheckIcon size="5" />
                                    }} mt={1}
                                >

                                </Select>*/}
                                <Text>Adi ve soyadi</Text>
                            </Modal.Body>
                            <Modal.Footer>
                                <Button.Group space={2}>
                                    <Button variant="ghost" colorScheme="blueGray" onPress={() => setShowModal(false)} >
                                        Çıkış
                                    </Button>
                                    <Button onPress={() => setShowModal(false)} >
                                        Kaydet
                                    </Button>
                                </Button.Group>
                            </Modal.Footer>
                        </Modal.Content>
                    </Modal>

和可按下的代碼：

<Box flex="1" >

                                        <Pressable left={290} top="-35" onPress={() => setShowModal(true)}>
                                            <Image size={7} source={require('../assets/clock.png')} />
                                        </Pressable>


                                    </Box>

我嘗試更改 pressable 但它不起作用

Answer 1

試試這個

為模型創建一個組件以供重用或使用，可以將其放在屏幕本身中。

模態.js

 const Mdal = ({...props }) => { const { onInputChanged, showModal, onClose, header, inputTitle, ...p } = props; const [isOpen, setIsOpen] = useState(false); return ( <Modal isOpen={showModal} onClose={onClose} _backdrop={{ _dark: { bg: "coolGray.800", }, bg: "warmGray.50", }} > <Modal.Content borderWidth={2} width="500" maxWidth="93%" maxH="600"> <Modal.CloseButton /> <Modal.Header flexDirection="row">{header}</Modal.Header> <Modal.Body> <Text>Your View</Text> </Modal.Body> <Modal.Footer background={COLOR.card_action_bg}> <Button.Group space={2}> <Button colorScheme="warmGray" onPress={() => { onInputChanged("if any passing value"); }} > Save </Button> <Button colorScheme="red" onPress={() => { onClose(); }} > Cancel </Button> </Button.Group> </Modal.Footer> </Modal.Content> </Modal> ); }; export default Mdal;

在您想要模態的屏幕中：

 import { Model } from "the path if it is as component"
 
 const [showModal, setShowModal] = useState(false);

將它放在你的視圖中

<Modal onInputChanged={onInputChanged} showModal={showModal} onClose={() => setShowModal(false)} header={"(" + ticketId + ") - " + action} inputTitle={"Reason for transfer"} />

onInputChanged - is the function

 const onInputChanged = (changedText) => { //received selected value in changedText }

在可按下的視圖（onPress）上將 showModal 的狀態更改為 true ->

設置顯示模態（真）；