2

私は作って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 でも機能しません

4

1 に答える 1

2

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;
于 2021-08-01T09:03:05.437 に答える