我正在使用 react-native 和 react-native-paper 开发移动应用程序。我对Snackbar
组件提供的 react-native-paper 有疑问。当用户触摸任何地方时,如何隐藏小吃栏?
这是 GIF,当小吃栏位于屏幕底部时,我尝试点击很多。当我点击屏幕时,我想隐藏它。
https://gyazo.com/a279a5e9a1b8270e7303446d20c238dc
这是我的代码。
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'
}
});