未调用React Native <Modal /> onDismiss

Question

基于以下代码，我希望看到“ onDismiss！”当我向下滑动模式视图时。

当我向下滑动模式视图时，它不会调用提供的功能。我找不到其他任何遇到此问题的React Native用户。我正在使用React Native版本0.60.6。

我使用Modal的方式错误还是这是一个错误？

<Modal
  animationType="slide"
  presentationStyle="pageSheet"
  visible={showSetup}
  hardwareAccelerated
  onDismiss={() => alert('onDismiss!')}
  onRequestClose={() => alert('onRequestClose!')}
>
  <SetupView closeView={() => this.willClose()} />
</Modal>

Answer 1

React Native问题跟踪器上的此问题准确地描述了此问题：https://github.com/facebook/react-native/issues/26892

希望它能尽快修复！

Answer 2

嘿，你应该尝试类似的事情

这是在我的模态中呈现的组件的代码：

  <TouchableWithoutFeedback
        onPressOut={() => {
          this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
            if (py === Dimensions.get('window').height) {
              this.props.hide(false);
            }
          });
        }}
      >
        <View style={styles.view} ref={'view_ref'}>
          <View style={styles.nav}>
            <Text style={styles.nav_title}>New Currency</Text>
            <TouchableOpacity
              onPress={() => {
                this.props.hide(false);
              }}
            >
              <Icon
                style={styles.nav_close}
                name={'close'}
                size={30}
                color={mode === 'dark' ? 'white' : 'black'}
              />
            </TouchableOpacity>
          </View>
        </View>
      </TouchableWithoutFeedback>

将要呈现的视图包装在TouchableWithoutFeedback中时，将获得“ onPressOut”功能。然后使用这段代码：

onPressOut={() => {
          this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
            if (py === Dimensions.get('window').height) {
              this.props.hide(false);
            }
          });
        }}

您基本上是告诉视图侦听模态顶部发生的触摸事件，因此当您滑动以消除视图时也会执行该视图

我从这个答案中得到启发： https://github.com/facebook/react-native/issues/26892#issuecomment-605516625

享受?

Answer 3

这是React Native的一个错误，但是我发现了一个对我有效的解决方法。基本上，我有TouchableWithoutFeedback填充了整个模态。然后，我使用onPressOut道具，该道具会收到一个event，您可以从中测量locationY。我发现，如果使用locationY < 0，则刷卡成功解除了Modal，在这种情况下，您可以致电setModalVisible(false)。然后，下次您要重新显示Modal时，它将起作用。希望对您有帮助！

<Modal animationType="slide" presentationStyle="pageSheet" visible={ modal }>
  <TouchableWithoutFeedback onPressOut={(e) => {
    if (e.nativeEvent.locationY < 0) {
      handleModal(false)
    }}
  >
    <View style={ styles.modalOuter }>
      <View style={ styles.modalInner }>
        <Text>Hi from Modal</Text>
      </View>
    </View>
  </TouchableWithoutFeedback>
</Modal>

// ...

const styles = StyleSheet.create({
  modalInner: {
    backgroundColor: "white",
    position: "absolute",
    bottom: 0,
    width: "100%",
    height: 400
  },
  modalOuter: {
    backgroundColor: "white",
    height: "100%"
  }
});

Answer 4

＃已解决 对于该问题，有一个简单的解决方案，您需要做的是：

在react native中设计一个按钮 在构造函数状态代码中添加以下代码：

constructor(){
  super();
  this.state = {
    isVisible: false;
  };
}

现在移至该按钮并将其添加为onPress事件：

onPress={() => {
  this.showmodal(true)
}}

您可以使用的参考功能/帮助功能：

showmodal = show => {
  this.setState({ isVisible: show });
}