PopUp弹窗组件

import React from "react"
import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native'

export default (props) => {
    const { visible, onClose, children } = props

    return (
        <Modal transparent visible={visible} animationType={'fade'} onRequestClose={() => onClose()}>
            <TouchableOpacity style={styles.overlay} activeOpacity={1} onPress={() => onClose()} />
            <View style={styles.content}>
                {children}
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },

    content: {
        position: "absolute",
        left: 0,
        bottom: 0,
        width: "100%",
        backgroundColor: '#ffffff',
        zIndex: 1,
        padding: 10,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
    },
})

父组件引入

import React, { useState } from 'react'
import { Button, Text } from 'react-native'
import PopUp from "../components/PopUp"

export default () => {
    const [visible, setVisible] = useState(false)

    return (
        <>
            <Button title="打开弹窗" onPress={() => setVisible(true)} />
            <PopUp visible={visible} onClose={() => setVisible(false)}>
                <Text>占位</Text>
                <Text>占位</Text>
                <Text>占位</Text>
                <Text>占位</Text>
                <Text>占位</Text>
                <Text>占位</Text>
            </PopUp>
        </>
    )
}