gpt4 book ai didi

android - Touchable 不适用于位置 : absolute

转载 作者:行者123 更新时间:2023-11-29 23:27:01 25 4
gpt4 key购买 nike

我不知道如何让我的组件可触摸。我有一个包装器,它有 position: relative 和两个 position: absolute 元素。我想让这个包装器可触摸,但它不适用于 react-native 中的任何 Touchable 组件。

此背景颜色仅用于测试。

<View style={styles.container}>
<TouchableHighlight onPress={() => { console.log('touched') }}>
<View style={styles.wrapper}>
<View style={styles.wrapperForImage} />
<Text style={styles.text} >{text.toUpperCase()}</Text>
</View>
</TouchableHighlight>
</View>

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
wrapper: {
position: 'relative',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
wrapperForImage: {
position: 'absolute',
width: 200,
height: 200,
backgroundColor: 'red'
},
text: {
position: 'absolute',
width: 100,
height: 100,
zIndex: 10,
textAlign: 'center',
color: '#000',
fontSize: 14,
lineHeight: 23
}

});

依赖关系:

"dependencies": {
"expo": "^31.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.10.0",
"tslib": "^1.9.3"
}

最佳答案

您需要为 TouchableHighlight 提供高度宽度:

<View style={styles.container}>
<TouchableHighlight style={{
backgroundColor: 'green',
height: '100%',
width: '100%',

}}
onPress={() => { alert('touched') }}>
<View style={styles.wrapper}>
<View style={styles.wrapperForImage} />
<Text style={styles.text} >TEXT</Text>
</View>
</TouchableHighlight>
</View>

关于android - Touchable 不适用于位置 : absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53381524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com