如何解决父视图之外的 TouchableOpacity 绝对正面不起作用反应原生
我正在制作 Picker component
,但我发现 Touchable Opacity
在其父视图之外的绝对位置不起作用。
const App = () => {
const data = [2,3,4,23]
const [isOpen,setIsOpen] = useState(true);
return (
<View style={{ flex: 1,backgroundColor: 'white',justifyContent: 'center',alignItems: 'center' }}>
<TouchableOpacity style={styles.container} onPress={setIsOpen.bind(null,true)} disabled={isOpen}>
<Text>3</Text>
<Image source={require('./assets/downArrow2.png')} />
{
isOpen && (
<View style={styles.optionsContainer}>
{
data.map((number,index) => (
<View key={index}>
<TouchableOpacity onPress={() => { setIsOpen(false) }}>
<View style={{ padding: 10,paddingRight: 40 }}>
<Text>{number}</Text>
</View>
</TouchableOpacity>
<View style={{ height: 1,width: '100%',backgroundColor: 'white' }} />
</View>
))
}
</View>
)
}
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
width: 48,paddingVertical: 8,paddingRight: 5,paddingLeft: 8,borderWidth: 1,borderColor: 'grey',flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',position: 'relative'
},optionsContainer:
position: 'absolute',top: -1,left: -1,backgroundColor: 'grey'
}
})
因此,有外部 TouchableOpacity
组件,并且在内部我们正在映射许多 TouchableOpacity
组件,其中子组件在绝对视图中。
TouchableOpacity
里面是 parent's view works
,但是 not Works outside Parent View with absolute position
。他们有人帮我解决这个问题吗???
它甚至不适用于 TouchableNativeFeedback
解决方法
使用来自 react-native-gesture-handler 的 TouchableOpacity 解决了绝对位置触摸的问题。但是,它会导致一些样式问题,例如溢出的“可见”属性不起作用。
所以您可以做的是,对于父级 TouchableOpacity,您可以使用 react-native 的 TouchableOpacity,而对于儿童,您可以使用 react-native-gesture-handler 的 TouchableOpacity 使触摸即使在绝对定位时也能正常工作。
这是更新代码。 请注意导入。
import { useState } from 'react';
import {View,StyleSheet,Text,TouchableOpacity as TouchableRN} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler'
const App = () => {
const data = [2,3,4,23]
const [isOpen,setIsOpen] = useState(false);
return (
<View style={{ flex: 1,backgroundColor: 'white',justifyContent: 'center',alignItems: 'center' }}>
<TouchableRN style={styles.container} onPress={setIsOpen.bind(null,true)} disabled={isOpen}>
<Text>3</Text>
<Image source={require('./assets/downArrow2.png')} />
{
isOpen && (
<View style={styles.optionsContainer}>
{
data.map((number,index) => (
<View key={index}>
<TouchableOpacity onPress={() => { setIsOpen(false) }}>
<View style={{ padding: 10,paddingRight: 40 }}>
<Text>{number}</Text>
</View>
</TouchableOpacity>
<View style={{ height: 1,width: '100%',backgroundColor: 'white' }} />
</View>
))
}
</View>
)
}
</TouchableRN>
</View>
)
}
const styles = StyleSheet.create({
container: {
width: 48,paddingVertical: 8,paddingRight: 5,paddingLeft: 8,borderWidth: 1,borderColor: 'grey',flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',position: 'relative'
},optionsContainer: {
position: 'absolute',top: -1,left: -1,backgroundColor: 'grey'
}
})
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。