Question

我已经编写了一个代码来隐藏模态，只要用户点击“隐藏我”即可。在模态中的文本，但是当我们在模态外部单击时，我也希望隐藏模态。我可以使用＆＃39; TouchableWithoutFeedback＆＃39;但它对我不起作用。我怎样才能使用＆＃39; TouchableWithoutFeedback＆＃39;或其他任何解决方案？

function findSelectedText(arr, text){
    return arr.findIndex(function(element){
        return element.selectedText === text;
    });
}
if (selectedText.length && findSelectedText(selectionArray, selectedText) === -1) {
     Vue.set(selectionArray, selectionArray.length, {selectedText: selectedText});
}

Answer 1

您没有为Modal分配道具，正在执行

<Modal visible={this.state.showPopupModal}>
  <View>
    <TouchableOpacity onPress={() => { hideModal(); }}>
      <Text> hide me </Text>
    </TouchableOpacity>
  </View>
</Modal>

应该解决这个问题。

Answer 2

您必须设置Modal的isVisible和onBackdropPress属性，例如：

item        = ["product_name", "price_rate", "price", "quantity"]
dictList    = {}
for data in product_list:
    if data[0] not in dictList:
        dictList[data[0]]   = dict(zip(item, data))
    else:
        tmpD    = dict(zip(item, data))
        dictList[data[0]]["price"]      = float(dictList[data[0]]["price"]) + float(tmpD['price'])
        dictList[data[0]]["quantity"]   = float(dictList[data[0]]["quantity"]) + float(tmpD['quantity'])
        # dictList[data[0]]["price_rate"] = float(dictList[data[0]]["price_rate"]) + float(tmpD['price_rate'])

arrayList   = [ list(dVal.values()) for dKey, dVal in dictList.items() ]
print(arrayList)
## PRINTS:
## [
##     ['phone',  '500', 2700.0, 6.0], 
##     ['camera', '200', 1080.0, 6], 
##     ['laptop', '600', 1620.0, 3.0]
## ]

Answer 3

this.state = {
  showPopupModal: false
}
hideModal(){
this.setState({showPopupModal: false});
}  
showModal(){
 this.setState({showPopupModal: true});
}  
return(
<Conatiner>
 <View>
  <TouchableOpacity onPress={() => { showModal(); }}>
   <Text> open modal <Text>
 </TouchableOpacity>
</View>
<TouchableWithoutFeedback onPress={() => { hideModal(); }}>
  <Modal visible={this.state.showPopupModal}>
  <TouchableWithoutFeedback onPress={() => { hideModal(); }}>
   <View>
    <TouchableOpacity onPress={() => { hideModal(); }}>
     <Text> hide me </Text>
    </TouchableOpacity>
   </View>
  </TouchableWithoutFeedback>
 </Modal>
</TouchableWithoutFeedback>
</Container>
);

这个解决方案对我有用。

如何通过单击React Native中的模态体隐藏模态

3 个答案: