react-native - 绝对正面的父视图之外的 TouchableOpacity 不起作用

Question

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

Answer 1

使用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;