父視圖之外的 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

Answer 1

使用react-native-gesture-handler中的 TouchableOpacity 解決了絕對 position 次觸摸的問題。 但是，它會導致一些樣式問題，例如溢出“可見”屬性不起作用。

所以你可以做的是，對於父 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;