如何在React Native中关闭模式？

Question

I am unable to close a modal. I am displaying few images inside it, and onPress of the "X(close)" icon, want to close the modal. I have tried setting the state of modalvisible to false, by default which is set to true. But on press of icon the modal doesn't gets closed. Any solution would be of great help.

 export default class imagenav extends Component{
  constructor(props){
    super(props)
    state = {
      modalVisible: false,
  }
}
openmodal(){
  this.setState(modalVisible: true)
}

render() {
  return (
    <Container>
      <Modal  onRequestClose={() => {}}> 
      <GallerySwiper
          style={{ flex: 1, backgroundColor: "black" }}
          images={[
            {source: {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",

              dimensions: {width: 1080, height: 1920}}
          },
          ]}
      />
      <Header
            style={{
              backgroundColor: 'black',
              borderBottomWidth: 0,
            }}
          > 
      <Right>
              <Icon
                name='close'
                color='white'
                onPress={() => {
                   this.setState({
                    modalVisible: false,
                  })  

                  console.log("getting closed");

                }} 
              />
              </Right>
              </Header>

      </Modal>
      </Container>
  );
}
}

Answer 1

It is enough to put a state for it in visible as bellow:

<Modal onRequestClose={()=> null} visible={this.state.active} transparent={true}>

       /////your Views and things to show in modal


</Modal>

in your state you have to make it as blew:

    constructor(props) {
        super();
        this.state =  {
          active:false,
        }

      }

And then you have to toggle it in an onPress for example:

   onPress=()={
       this.setState({active:true})
    }

So totally in your project you will have:

 export default class imagenav extends Component{
      constructor(props){
        super(props)
        state = {
          modalVisible: false,
      }
    }
    openmodal(){
      this.setState({modalVisible: true})
    }
    render() {
      return (
        <Container>
          <Modal  visible={this.state.modalVisible} onRequestClose={() => {}}> 
          <View style={{flex:1}}>
          <GallerySwiper
              style={{ flex: 1, backgroundColor: "black" }}
              images={[
                {source: {uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",

                  dimensions: {width: 1080, height: 1920}}
              },
              ]}
          />
          <Header
                style={{
                  backgroundColor: 'black',
                  borderBottomWidth: 0,
                }}
              > 
          <Right>
                  <Icon
                    name='close'
                    color='white'
                    onPress={() => {
                       this.setState({
                        modalVisible: false,
                      })  

                      console.log("getting closed");

                    }} 
                  />
                  </Right>
                  </Header>
           </View>

          </Modal>
          </Container>
      );
    }
    }

Update: According to your last request there is a way. You can pass flag to your next screen and in the componentDidMount() of next screen you can check it. if it is true you can show the modal otherwise ignore it.

I hope I could help. :)

Answer 2

You could use an inline if to only render your modal is your state allows it :

{this.state.modalVisible && 
    <Modal onRequestClose={() => { }}>
        <GallerySwiper
            style={{ flex: 1, backgroundColor: "black" }}
            images={[
                {
                    source: {
                        uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png",

                        dimensions: { width: 1080, height: 1920 }
                    }
                },
            ]}
        />
        <Header
            style={{
                backgroundColor: 'black',
                borderBottomWidth: 0,
            }}
        >
            <Right>
                <Icon
                    name='close'
                    color='white'
                    onPress={() => {
                        this.setState({
                            modalVisible: false,
                        })

                        console.log("getting closed");

                    }}
                />
            </Right>
        </Header>
    </Modal>
}

Answer 3

You have a state, but you are not using it

<Modal onRequestClose={()=> this.openmodal(false)} visible={this.state.modalVisible}> should be good to go.

oh and your openmodal function can be used for opening and closing the modal

openmodal(value){
  this.setState({modalVisible: value})
}

<Icon
                    name='close'
                    color='white'
                    onPress={() => {
                      this.openmodal(false)   
                      console.log("getting closed");
                    }} 
                  />