如何使用 typescript 创建 react-native 自定义视图

Question

I want to create a custom view with react-native-modal in my custom view:

type Props = {isVisible: boolean;setVisible: void }
<Modal isVisible={props.visible}......>
<Button title="colse" onPress={()=> props.setVisible}>

Then in my page:

const [isVisible,setVisible]= React.useState(false)
const onClick= () =>{setVisible(!isVisible)}
<MyView visible={isVisible} setVisible={onClick}/>

But when I click the button, nothing happens and there is no error.

If I change the code like this:

const [isVisible,setVisible]= React.useState(true)

the dialog will be shown at first, but cannot close.

I hope someone can give me an example of how to do that.

Answer 1

Try this way

<Button title="colse" onPress={()=> props.setVisible()}>


const [isVisible,setVisible] = React.useState(false)
const onClick= () => {setVisible(!isVisible)}
<MyView visible={isVisible} setVisible={onClick}/>

Answer 2

Have a try by updating the state based on the previous state .

like:

const onClick = () => {setVisible(prevState => !prevState)}