Как закрыть модал в реагировать на родной?

Question

Я не могу закрыть модал.Я показываю несколько изображений внутри него, и на значке «X (закрыть)» нажмите, чтобы закрыть модальное окно.Я попытался установить состояние modalvisible в false, по умолчанию, которое установлено в true.Но при нажатии иконки модал не закрывается.Любое решение будет очень полезно.

 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

Вы можете использовать встроенный if только для рендеринга вашего модала, если ваше состояние позволяет:

{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 2

У вас есть состояние, но вы его не используете

<Modal onRequestClose={()=> this.openmodal(false)} visible={this.state.modalVisible}> должно быть хорошо.

о, и ваша функция openmodal может быть использована для открытия и закрытия модальных

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

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

Answer 3

Достаточно поставить для него состояние, отображаемое ниже:

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

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


</Modal>

в вашем состоянии вы должны сделать его выдутым:

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

      }

И тогда у вас естьчтобы переключить его в onPress, например:

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

Таким образом, в вашем проекте у вас будет:

 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>
      );
    }
    }

Обновление: Согласно вашему последнему запросувдали.Вы можете передать флаг следующему экрану, а в componentDidMount () следующего экрана вы можете проверить его.если это правда, вы можете показать модал, иначе проигнорируйте его.

Я надеюсь, что смогу помочь.:)