我正在制作,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