反应本地弹出对话框的onTouchOutside无法正常工作

时间:2019-02-26 07:02:20

标签: reactjs react-native jsx react-native-popup-menu

我正在使用this进行弹出。我写了一个函数,通过触摸弹出对话框的外部来关闭弹出窗口,但是它不起作用。我在弹出窗口中放置了一个关闭按钮,效果很好。

示例代码

<Dialog
  visible={this.state.customBackgroundDialog}
  onTouchOutside={() => {
    this.setState({ customBackgroundDialog: false })
  }}
  onDismiss={() => {
    this.setState({ customBackgroundDialog: false })
  }}
  onHardwareBackPress={() => {
    this.setState({ customBackgroundDialog: false })
  }}
  rounded={false}
  dialogStyle={{
    flex: 1,
    backgroundColor: 'transparent',
    padding: 10,
    width: wp('100%'),
    alignItems: 'center',
    justifyContent: 'flex-end'
  }}
  dialogAnimation={new SlideAnimation({
    slideFrom: 'bottom',
  })}
>
  <DialogContent style={{ width: wp('100%'), paddingLeft: 0, justifyContent: 'center', paddingRight: 0 }}>
    <View style={{
      width: wp('95%'),
      height: hp('40%'),
      marginHorizontal: 10,
      backgroundColor: '#fff',
      justifyContent: 'flex-end',
      borderRadius: 5
    }}>
      <TouchableOpacity
        style={{ alignItems: 'flex-end', paddingHorizontal: 10 }}
        onPress={() => {
          this.setState({ customBackgroundDialog: false });
        }}
      >
        <MaterialCommunityIcons name="close" size={30} color="#000" />
      </TouchableOpacity>
    </View>
  .. 
  ..
  ......
  </DialogContent>
</Dialog>

请帮助我。任何帮助表示赞赏。谢谢!

0 个答案:

没有答案