我希望在外部点击时隐藏组件。像解雇键盘之类的东西。我通过改变状态onPress将我的整个视图包装在ToucheableWithoutFeedback中来完成此操作但Toucheables禁用了ScrollView。
你能告诉我一个滚动视图仍然有用的方法吗?
或
如何处理视图中或组件外部的点击?
我目前的代码是这样的:
<TouchableWithoutFeedback onPress={() =>{this.setState({toggle:false})}}>
<View>
{//content}
</View>
<ScrollView>
{//lists here}
</ScrollView>
{{
if(this.state.toggle){
return
(<View>
{//The view that im hiding when clicking outside it}
</View>)
}
else
return <View/>
</TouchableWithoutFeedback>
答案 0 :(得分:4)
一种方法是假装&#34;假的&#34; TouchableWithoutFeedback
whis的容器只是实际内容之下的一层。这是一个例子:https://rnplay.org/apps/k2RSNw
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={(evt) => this.toggleState(evt)}>
<View style={styles.touchable}></View>
</TouchableWithoutFeedback>
<View style={[styles.modal, this.isModalVisible()]}>
<Text>Modal</Text>
</View>
</View>
);
}
如果您想根据点击的元素执行特定操作,可以填充evt
提供给toggleState()
的事件数据。
我通过样式切换了可见性。这是因为在我处理的许多情况下,切换元素有一些视觉效果。
答案 1 :(得分:2)
简单的方法是使用模态透明
<Modal
transparent
visible={this.state.isAndroidShareOpen}
animationType="fade"
onRequestClose={() => {}}
>
<TouchableOpacity
activeOpacity={1}
onPress={() => {
this.setState({
isAndroidShareOpen: false,
});
}}
style={{
backgroundColor: 'transparent',
flex: 1,
}}
>
<TouchableOpacity
activeOpacity={1}
style={{
backgroundColor: '#f2f2f2',
left: 0,
top: 50,
aspectRatio: 1.5,
width,
position: 'absolute',
}}
>
<Text>content</Text>
</TouchableOpacity>
</TouchableOpacity>
</Modal>
答案 2 :(得分:1)
已经有一个老问题,但这是第一个结果,所以就这样:
我们将用占据整个屏幕的不可见元素填充相关容器的背景,如下所示:
<TouchableWithoutFeedback onPress={onBlur}>
<View style={{width, height, position: 'absolute', left: 0, top: 0}} />
</TouchableWithoutFeedback>
这是我接受孩子的完整模式(样式设置为居中):
import {Dimensions, View, TouchableWithoutFeedback} from 'react-native';
const ModalFloating = ({children, onBlur = ()=>{} }) => {
const [{width, height}, setSize] = useState({width: 0, height: 0});
return (
<View style={[styles.wrapper, {width, height}]} onLayout={() => setSize(Dimensions.get('window'))}>
<TouchableWithoutFeedback onPress={onBlur}>
<View style={{width, height, position: 'absolute', left: 0, top: 0}} />
</TouchableWithoutFeedback>
{children}
</View>
)
};`