[英]modal not working correctly in native base
我想要当我点击按钮时,打开模态。 但是模态没有正确打开。 它不可读。
这是我的模态代码:
<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 但它不起作用
试试这个
为模型创建一个组件以供重用或使用,可以将其放在屏幕本身中。
模态.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 ->
设置显示模态(真);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.