React Native <Modal /> onDismiss 未调用答案

【问题标题】：React Native <Modal /> onDismiss not invokedReact Native <Modal /> onDismiss 未调用
【发布时间】：2020-03-15 04:53:03
【问题描述】：

根据下面的代码，我希望看到“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>

【问题讨论】：

您从this answer 签出库了吗？我想您可以使用滑动事件处理程序从模式中触发onDismiss。
@ChrisB 我对这个库很熟悉，但这似乎有点矫枉过正。我只想知道视图何时被关闭，因此我可以将 showSetup 设置回 false 以便可以再次访问模态视图。
这确实似乎是一个错误，我遇到了同样的问题（由于onDismiss 的功能不正确，重新单击无法正常工作）。在我的情况下，我可以通过检查操作中的可见性状态并手动调用关闭操作来解决它。重要的是要等到状态持续存在（使用超时或回调）。完全不相关..但请问您是如何设法获得 pageSheet 后面的黑色背景颜色的？

标签： javascript reactjs react-native

【解决方案1】：

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

希望尽快解决！

【讨论】：

【解决方案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

享受?

【讨论】：

【解决方案3】：

这是 React Native 的一个错误，但我找到了一个适合我的解决方法。基本上我有一个TouchableWithoutFeedback 填充整个模态。然后我使用onPressOut prop，它接收一个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%"
  }
});

【讨论】：