React native 如何在用户单击本机纸张中的屏幕时消除Snackbar

我正在用react native和react native paper开发移动应用程序。 我有一个问题，Snackbar组件提供了本地文件。 当用户触摸任何地方时，如何隐藏snackbar

这是GIF，当snackbar位于屏幕底部时，我尝试点击了许多。我想在点击屏幕时将其隐藏

这是我的密码

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Provider, Snackbar } from 'react-native-paper';

export default class MainScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true,
    };
    this.onDismissSnack = this.onDismissSnack.bind(this);
  }

  onDismissSnack() {
    this.setState({
      visible: false
    })
  }

  render() {
    return (
      <Provider>
        <Snackbar
          visible={this.state.visible}
          onDismiss={() => this.onDismissSnack()}>
          <Text>Hello Snackbar</Text>
        </Snackbar>
      </Provider>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

根据这个例子，你有一个名为action with的道具，它可以让你添加一个你想要的标签，在这个例子中，它是discover

检查我创建的零食：

从“React”导入React，{useState}； 从“react native”导入{视图、文本、按钮}； 从“react native paper”导入{Snackbar}； 导出默认值=>{ const[visible，setVisible]=useStatefalse； 回来 setVisibletrue}/> setVisiblefalse} 行动={{ 标签：“解雇”， onPress:=>setVisiblefalse， }}> 你好，斯纳克巴 ; }; 在问题的作者请求后更新

要能够解除该模式，可以将该组件放置在模式中，如下所示：

从“React”导入React，{useState}； 进口{ 看法 文本 按钮 情态动词 样式表， 可触摸且无反馈， }从“反应本机”； 从“react native paper”导入{Snackbar}； 导出默认值=>{ const[visible，setVisible]=useStatetrue； 回来 setVisibletrue}/> setVisiblefalse}> setVisiblefalse}> 你好，斯纳克巴 ; }; const styles=StyleSheet.create{ 容器：{ 弹性：1， 为内容辩护：“中心”， }, 模态：{ 宽度：“100%”， 高度：“100%”， 位置：'相对'， }, };

---

在我看来，解决方法是，您应该使用“驳回”按钮，这要简单得多。

谢谢您的评论，但在代码中，您需要按snackbar上的“驳回”标签来隐藏它，对吗？当用户点击屏幕上的任何地方时，我想隐藏它。@SatoruKikuchi你可以把它放在模态中，然后关闭模态谢谢，你刚才提到的模态是什么？我应该使用哪种模式？给我一分钟，我会给你举个例子