Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/postgresql/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Android 可触摸显示器';t使用位置:绝对_Android_React Native - Fatal编程技术网

Android 可触摸显示器';t使用位置:绝对

Android 可触摸显示器';t使用位置:绝对,android,react-native,Android,React Native,我不知道如何使我的组件可触摸。我有一个包装器有位置:相对和两个元素的位置:绝对。我想让这个包装器可触摸,但它不能与react native的任何可触摸组件一起工作 此背景色仅用于测试 <View style={styles.container}> <TouchableHighlight onPress={() => { console.log('touched') }}> <View style={styles.wrapper}>

我不知道如何使我的组件可触摸。我有一个包装器有位置:相对和两个元素的位置:绝对。我想让这个包装器可触摸,但它不能与react native的任何可触摸组件一起工作

此背景色仅用于测试

<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>