Question

我无法关闭模式。我在其中显示了少量图像，并且“ X（close）”图标的onPress想关闭模式。我尝试将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

在下面将其置于可见状态就足够了：

<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（）中进行检查。如果为true，则可以显示模式，否则将其忽略。

希望我能帮上忙。：）

Answer 2

您可以使用内联#! /usr/bin/ipython3 a=input('Please enter your Name : ') if a=='mohammadreza': print(" ") print ('i found you finally') print(" ") elif a=='': print ('Null name is not ok!') else: print ('No you are not that person')仅在状态允许的情况下呈现模态：

if

Answer 3

您有一个状态，但是您没有使用它

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

如何在React Native中关闭模式？

3 个答案: