Android 可触摸显示器';t使用位置:绝对
我不知道如何使我的组件可触摸。我有一个包装器有位置:相对和两个元素的位置:绝对。我想让这个包装器可触摸,但它不能与react native的任何可触摸组件一起工作 此背景色仅用于测试Android 可触摸显示器';t使用位置:绝对,android,react-native,Android,React Native,我不知道如何使我的组件可触摸。我有一个包装器有位置:相对和两个元素的位置:绝对。我想让这个包装器可触摸,但它不能与react native的任何可触摸组件一起工作 此背景色仅用于测试 <View style={styles.container}> <TouchableHighlight onPress={() => { console.log('touched') }}> <View style={styles.wrapper}>
<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
}
您需要为可触摸突出显示提供高度和宽度:
<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>
{alert('toucted')}>
正文
我在Android上的解决方案是从父容器中删除提升
样式。尝试将zIndex:1添加到包装器中
<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>