父视图之外的 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;